/*
Theme Name: Ruscica Abogados
Theme URI: https://ruscica.cl
Author: Brend Estudio
Author URI: https://brendestudio.com
Description: Sitio de Ruscica Abogados: portada con banners en video, quiénes somos, áreas de práctica, equipo con fichas individuales y formulario de contacto. Bilingüe español e inglés.
Version: 5.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ruscica
*/


:root{
	--teal: #0E7C90;
	--teal-deep: #0A5F70;
	--teal-light: #7FCEDA;
	--gray: #ABABAB;
	--gray-tint: #F3F3F1;
	--ink: #131516;
	--ink-soft: #2A2E31;
	--paper: #FFFFFF;
	--line: #E4E3DE;
	--muted: #6B6F71;
	--pad: clamp(22px, 6vw, 96px);
	--ancho: 1180px;   /* ancho de contenido, igual en todas las secciones */
	--lectura: 820px;  /* ancho cómodo para párrafos largos */
}

/* Contenedor común: alinea todas las secciones entre sí */
.wrap{
	max-width: var(--ancho);
	margin: 0 auto;
	width: 100%;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

/* La barra superior es fija: al saltar a una sección hay que dejarle
   ese espacio, o el título queda escondido detrás. */
#quienes, #areas, #equipo, #contacto{ scroll-margin-top: 118px; }
@media (max-width: 1080px){
	#quienes, #areas, #equipo, #contacto{ scroll-margin-top: 90px; }
}

body{
	margin:0;
	background: var(--paper);
	color: var(--ink);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	-webkit-font-smoothing: antialiased;
	width:100%;
	overflow-x: hidden;
}

h1,h2,h3,h4{ font-family:'Sora', sans-serif; margin:0; }
a{ color: inherit; }
img{ max-width:100%; }

/* ===== BILINGÜE ===== */
[data-lang="en"] .lang-es{ display:none !important; }
[data-lang="es"] .lang-en{ display:none !important; }

/* ===== ETIQUETAS DE SECCIÓN ===== */
.eyebrow{
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--teal);
	font-weight: 600;
	display:flex;
	align-items:center;
	gap:8px;
}
.eyebrow::before{
	content:"";
	width:5px; height:5px;
	border-radius:50%;
	background: var(--teal);
	display:inline-block;
	flex: 0 0 auto;
}

/* ===== HEADER ===== */
.topbar{
	display:flex;
	align-items:center;
	justify-content: space-between;
	padding: 26px var(--pad);
	width:100%;
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 80;
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.topbar.is-stuck{ border-bottom-color: var(--line); }
.topbar .brand img{ height: 48px; display:block; }

.topbar nav{
	display:flex;
	align-items:center;
	gap: 32px;
	margin-left:auto;
	margin-right: 28px;
}
.topbar nav a{
	font-size: 13px;
	color: var(--ink-soft);
	text-decoration:none;
	font-weight: 500;
	transition: color .25s ease;
	white-space: nowrap;
}
.topbar nav a:hover{ color: var(--teal); }
.topbar nav a.is-current{
	color: var(--teal);
	position:relative;
}
.topbar nav a.is-current::after{
	content:"";
	position:absolute;
	left:0; right:0; bottom:-7px;
	height:1.5px;
	background: var(--teal);
}

/* Selector de idioma */
.lang-switch{
	display:flex;
	align-items:center;
	gap:0;
	border:1px solid var(--line);
	border-radius:999px;
	overflow:hidden;
	margin-right: 14px;
	flex: 0 0 auto;
}
.lang-switch button{
	background:none;
	border:none;
	font-family:'Inter',sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing:.06em;
	padding: 7px 13px;
	cursor:pointer;
	color: var(--muted);
	transition: background .25s ease, color .25s ease;
}
.lang-switch button.is-active{
	background: var(--teal);
	color:#fff;
}

.btn-pill{
	background: var(--teal-deep);
	color:#fff;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing:.04em;
	text-decoration:none;
	padding: 11px 26px;
	border-radius:999px;
	white-space:nowrap;
	transition: background .25s ease, transform .25s ease;
	display:inline-block;
}
.btn-pill:hover{ background: var(--teal); transform: translateY(-1px); }

/* ===== MENÚ MÓVIL ===== */
.nav-toggle{
	display:none;
	flex-direction:column;
	justify-content:center;
	gap:5px;
	width:40px; height:40px;
	background:none; border:none;
	cursor:pointer; padding:0;
	z-index: 90;
}
.nav-toggle span{
	display:block;
	height:1.5px; width:22px;
	background: var(--ink);
	margin-left:auto;
	transition: transform .35s ease, opacity .25s ease;
}
body.nav-open .nav-toggle span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
.nav-cta{ display:none; }

/* ===== SLIDER DE PORTADA ===== */
.hero-slider{
	position: relative;
	width:100%;
	height: min(88vh, 820px);
	min-height: 500px;
	overflow:hidden;
	background: var(--ink);
}
.slide{
	position:absolute;
	inset:0;
	opacity:0;
	transition: opacity 1.4s cubic-bezier(.4,0,.2,1);
	pointer-events:none;
}
.slide.is-active{ opacity:1; pointer-events:auto; }

/* Fondo: color provisional hasta que se suban los videos */
.slide-media{
	position:absolute;
	inset:0;
	overflow:hidden;
}
.slide-media video,
.slide-media img{
	width:100%;
	height:100%;
	object-fit: cover;
	display:block;
}
.slide-1 .slide-media{ background: linear-gradient(125deg, #0A5F70 0%, #0E7C90 55%, #4E96A3 100%); }
.slide-2 .slide-media{ background: linear-gradient(125deg, #1B2224 0%, #2E3A3D 55%, #4A5B5E 100%); }
.slide-3 .slide-media{ background: linear-gradient(125deg, #3C6A74 0%, #6C9AA3 55%, #A8C3C8 100%); }

/* Velo en degradado: arriba totalmente transparente, para que la imagen
   se vea con toda su luz; solo oscurece la franja de abajo, donde va el
   texto. Nada de capa pareja sobre la foto completa. */
.slide-media::after{
	content:"";
	position:absolute; inset:0;
	background: linear-gradient(180deg,
		rgba(4,14,18,0)    0%,
		rgba(4,14,18,0)    30%,
		rgba(4,14,18,.18)  46%,
		rgba(4,14,18,.46)  64%,
		rgba(4,14,18,.70)  84%,
		rgba(4,14,18,.82) 100%);
}
/* trama sutil para que el color plano no se vea vacío */
.slide-media::before{
	content:"";
	position:absolute; inset:0;
	background-image:
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 120px 120px;
	z-index:1;
}

.slide-body{
	position:relative;
	z-index:3;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	padding: 0 var(--pad) clamp(56px, 9vh, 96px);
	max-width: 1100px;
}
.slide-body p{
	font-family:'Sora', sans-serif;
	font-size: clamp(21px, 2.8vw, 38px);
	line-height: 1.32;
	font-weight: 400;
	color:#fff;
	margin:0;
	letter-spacing: -0.012em;
	/* Justificado: el texto llena la caja, así que la caja define el
	   largo de línea. 'text-wrap: balance' se quita porque reparte las
	   líneas por su cuenta y pelea con el justificado. */
	max-width: 900px;
	text-align: justify;
	hyphens: none;
	-webkit-hyphens: none;
	/* Respaldo de legibilidad si el video tiene un momento muy claro */
	text-shadow: 0 1px 2px rgba(0,0,0,.42), 0 2px 26px rgba(0,0,0,.5);
	opacity:0;
	transform: translateY(24px);
	transition: opacity .9s ease .25s, transform .9s cubic-bezier(.22,.61,.36,1) .25s;
}
.slide.is-active .slide-body p{ opacity:1; transform:none; }

/* Controles del slider */
.slider-dots{
	position:absolute;
	bottom: 26px;
	right: var(--pad);
	z-index: 10;
	display:flex;
	gap:10px;
}
.slider-dots button{
	width: 34px;
	height: 2px;
	border:none;
	padding:0;
	background: rgba(255,255,255,.35);
	cursor:pointer;
	position:relative;
	overflow:hidden;
	transition: background .3s ease;
}
.slider-dots button.is-active{ background: rgba(255,255,255,.9); }

/* ===== SECCIONES ===== */
.section{ padding: 78px var(--pad); width:100%; }

/* Encabezado de cada página interna */
.pag-encabezado{
	max-width: var(--ancho);
	margin: 0 auto 46px;
}
.pag-encabezado .eyebrow{ margin-bottom: 18px; }

/* Título grande de sección (pedido del cliente: más grande) */
.titulo-seccion{
	/* Mismo tamaño que los títulos de sección: una sola escala en todo el sitio */
	font-size: clamp(24px, 2.8vw, 36px);
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -0.018em;
	color: var(--ink);
	margin: 0;
	max-width: 900px;
	text-wrap: balance;
}

/* Banner con foto de las páginas internas */
.pag-banner{
	width:100%;
	min-height: min(42vh, 360px);
	background: var(--teal-deep) center/cover no-repeat;
	position:relative;
}
.pag-banner-body{
	position:relative;
	z-index:2;
	padding: 0 var(--pad) clamp(34px, 5vh, 56px);
	width:100%;
}
.pag-banner-body .wrap{ max-width: var(--ancho); }
/* Un único título de página: mismo tamaño y misma posición en todas
   las secciones, siempre debajo de la foto cuando la hay. */
.titulo-pagina{
	font-size: clamp(24px, 2.8vw, 36px);
	font-weight: 500;
	font-family:'Sora', sans-serif;
	letter-spacing:-0.018em;
	line-height:1.18;
	color: var(--ink);
	margin:0;
	max-width: var(--ancho);
	text-wrap: balance;
}

/* Bloque de texto largo, alineado con el título de la sección */
.texto-largo{
	max-width: var(--ancho);
	margin: 0 auto;
}
.texto-largo p{ max-width: var(--lectura); }
.texto-largo p{
	font-size: 15.5px;
	line-height:1.8;
	color:#45494B;
	margin: 0 0 22px;
	text-align: justify;
	hyphens: none;
	-webkit-hyphens: none;
}
.texto-largo p.destacado{
	font-size: clamp(19px, 2.1vw, 25px);
	line-height:1.5;
	font-weight:500;
	color: var(--teal);
	letter-spacing:-0.012em;
	text-align: justify;
	margin-bottom: 28px;
}

/* Enlace al final de cada página */
.siguiente{
	max-width: var(--ancho);
	margin: 52px auto 0;
	padding-top: 26px;
	border-top:1px solid var(--line);
}


/* ===== ÁREAS DE PRÁCTICA (tarjetas desplegables) ===== */
.areas-grid{
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap:1px;
	background: var(--line);
	max-width: var(--ancho);
	margin: 0 auto;
}

/* --- Tarjeta cuadrada con foto de fondo --- */
.p-card{
	order: var(--oc);
	background: var(--ink-soft);
	border:none;
	margin:0;
	padding: 26px 24px;
	aspect-ratio: 1/1;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:flex-start;
	text-align:left;
	cursor:pointer;
	font-family:'Sora',sans-serif;
	position:relative;
	overflow:hidden;
	isolation:isolate;
}
.p-card:focus-visible{ outline:2px solid var(--teal); outline-offset:-3px; }

/* Foto de fondo */
.p-foto{
	position:absolute;
	inset:0;
	z-index:-2;
	background: center/cover no-repeat;
	transform: scale(1.02);
	transition: transform 1.1s cubic-bezier(.22,.61,.36,1), filter .5s ease;
	/* Foto a plena luz, con un punto de saturación para que no se apague */
	filter: saturate(1.06);
}

/* Velo en degradado: transparente arriba, oscuro solo donde va el texto.
   Dos capas: una franja muy leve arriba para que el signo + se vea sobre
   cielos claros, y el degradado principal en la mitad inferior. */
.p-card::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:
		linear-gradient(180deg, rgba(8,20,24,.26) 0%, rgba(8,20,24,0) 20%),
		linear-gradient(180deg,
			rgba(8,20,24,0)    0%,
			rgba(8,20,24,0)    40%,
			rgba(8,20,24,.20)  56%,
			rgba(8,20,24,.52)  74%,
			rgba(8,20,24,.80)  92%,
			rgba(8,20,24,.88) 100%);
	transition: background .45s ease;
}

@media (hover: hover) and (pointer: fine){
	.p-card:hover .p-foto{ transform: scale(1.09); filter: saturate(1.14) brightness(1.04); }
	/* Al pasar el mouse el turquesa tiñe la parte baja, sin tapar la foto */
	.p-card:hover::after{
		background:
			linear-gradient(180deg, rgba(8,20,24,.26) 0%, rgba(8,20,24,0) 20%),
			linear-gradient(180deg,
				rgba(14,124,144,0)    0%,
				rgba(14,124,144,.10)  36%,
				rgba(14,124,144,.40)  58%,
				rgba(12,108,126,.74)  78%,
				rgba(10,95,112,.92)  100%);
	}
}

/* Tarjeta abierta: turquesa de marca, un poco más presente para que se
   note cuál está desplegada, pero la foto sigue viéndose. */
.p-card.is-open::after{
	background:
		linear-gradient(180deg, rgba(8,20,24,.24) 0%, rgba(8,20,24,0) 20%),
		linear-gradient(180deg,
			rgba(14,124,144,.10)  0%,
			rgba(14,124,144,.28) 34%,
			rgba(14,124,144,.58) 58%,
			rgba(10,95,112,.86)  80%,
			rgba(10,95,112,.96) 100%);
}
.p-card.is-open .p-foto{ filter: saturate(1.14) brightness(1.04); }

/* Signo + que gira a × al abrir */
.p-icon{
	width:18px; height:18px;
	position:relative;
	flex: 0 0 auto;
	/* Sombra propia: arriba ya casi no hay velo */
	filter: drop-shadow(0 1px 5px rgba(0,0,0,.55));
}
.p-icon::before,
.p-icon::after{
	content:"";
	position:absolute;
	top:50%; left:0;
	width:18px; height:1.5px;
	background:#fff;
	transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.p-icon::after{ transform: rotate(90deg); }
.p-card.is-open .p-icon::before{ transform: rotate(135deg); }
.p-card.is-open .p-icon::after{ transform: rotate(45deg); }

.p-foot{ width:100%; }
.p-num{
	display:block;
	font-size:12px;
	letter-spacing:.09em;
	color: rgba(255,255,255,.82);
	margin-bottom:8px;
	text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.p-title{
	display:block;
	font-size: 17px;
	font-weight:600;
	line-height:1.28;
	color:#fff;
	text-shadow: 0 1px 14px rgba(0,0,0,.5);
}

/* --- Panel desplegable --- */
.p-panel{
	order: var(--op);
	grid-column: 1 / -1;
	display:none;
	background: var(--gray-tint);
	border-top: 2px solid var(--teal);
	padding: 34px 36px 36px;
}
.p-panel.is-open{
	display:block;
	animation: panel-in .5s cubic-bezier(.22,.61,.36,1);
}
@keyframes panel-in{
	from{ opacity:0; transform: translateY(-10px); }
	to{ opacity:1; transform:none; }
}
.p-panel h3{
	font-size:16px;
	font-weight:600;
	color: var(--teal);
	margin:0 0 20px;
	letter-spacing:-0.005em;
}
.p-panel ul{
	list-style:none;
	margin:0; padding:0;
	columns: 2;
	column-gap: 48px;
}
.p-panel li{
	font-size:13.5px;
	line-height:1.65;
	color: var(--muted);
	margin-bottom:14px;
	padding-left:16px;
	position:relative;
	break-inside: avoid;
	text-align: justify;
	hyphens: none;
	-webkit-hyphens: none;
}
.p-panel li:last-child{ margin-bottom:0; }
.p-panel li::before{
	content:"";
	position:absolute;
	left:0; top:9px;
	width:6px; height:1px;
	background: var(--teal);
}


/* ===== EQUIPO ===== */
.team-grid{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	max-width: var(--ancho);
	margin: 0 auto;
}

/* Ficha horizontal: foto a la izquierda, datos a la derecha.
   Así no queda espacio muerto al lado de la foto y la sección
   completa se ve de una sola pasada, sin tener que bajar. */
.team-card{
	display:grid;
	grid-template-columns: clamp(150px, 17vw, 210px) minmax(0, 1fr);
	gap: 26px;
	align-items: stretch;
	padding: 24px;
	background: var(--paper);
	border:1px solid var(--line);
	transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.team-card:hover{
	border-color: var(--teal-light);
	box-shadow: 0 14px 34px rgba(10,95,112,.09);
	transform: translateY(-2px);
}

/* 3/4 es la proporción exacta de los archivos (600×800): sin recorte. */
.avatar{
	aspect-ratio: 3/4;
	background: var(--gray-tint);
	overflow:hidden;
	position:relative;
	display:block;
	width:100%;
}
.avatar img{
	width:100%; height:100%;
	object-fit: cover;
	object-position: center center;
	display:block;
	filter: grayscale(100%) contrast(1.02);
	transition: filter .6s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.team-card:hover .avatar img{ filter: grayscale(0%); transform: scale(1.04); }

.team-datos{
	display:flex;
	flex-direction:column;
	justify-content:center;   /* centrado respecto a la foto */
	min-width:0;
	padding: 4px 0 2px;
}
/* Aquí el enlace va pegado al texto, no al fondo de la ficha */
.team-datos .link-more{ margin-top:0; }
.team-role{
	font-size:10.5px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color: var(--teal);
	font-weight:600;
}
.team-name{
	font-size: clamp(17px, 1.5vw, 20px);
	margin: 6px 0 0;
	font-weight:600;
	font-family:'Sora',sans-serif;
	line-height:1.25;
	letter-spacing:-0.012em;
}
.team-bio{
	font-size:13.5px;
	line-height:1.65;
	color: var(--muted);
	margin: 12px 0 20px;
	text-align: justify;
	hyphens: none;
	-webkit-hyphens: none;
}

/* Texto solo para lectores de pantalla */
.oculto{
	position:absolute;
	width:1px; height:1px;
	padding:0; margin:-1px;
	overflow:hidden;
	clip: rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}
.link-more{
	font-size:12.5px;
	font-weight:600;
	letter-spacing:.02em;
	color: var(--teal);
	text-decoration:none;
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-top:auto;
	align-self:flex-start;
	padding-bottom:3px;
	border-bottom:1px solid transparent;
	transition: border-color .3s ease, gap .3s ease;
}
.link-more:hover{ border-bottom-color: var(--teal); gap:11px; }
.link-more svg{ width:12px; height:12px; }


/* Una sola franja gris, muy clara, para separar el bloque del medio
   del resto. Es el único cambio de fondo en toda la página. */
.seccion-gris{ background: var(--gray-tint); }


/* ===== CONTACTO (fondo claro, dos columnas) ===== */
.contacto-claro{
	/* Mismo gris que Áreas de práctica, para cerrar la página con
	   continuidad en vez de un blanco suelto al final. */
	background: var(--gray-tint);
	padding-top: 86px;
	padding-bottom: 96px;
}
.contacto-grid{
	max-width: var(--ancho);
	margin: 0 auto;
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	/* Sin el párrafo, el título se equilibra centrado frente a los datos */
	align-items: center;
}
.contacto-intro .eyebrow{ margin-bottom: 20px; }
.contacto-bajada{
	font-size:15px;
	line-height:1.75;
	color: var(--muted);
	margin: 22px 0 0;
	text-align: justify;
	hyphens: none;
	-webkit-hyphens: none;
}
.contacto-datos{
	display:grid;
	grid-template-columns: 1fr;
	border-top:1px solid var(--line);
}
.dato{
	padding: 22px 20px 22px 0;
	border-bottom:1px solid var(--line);
	position:relative;
	transition: padding-left .35s ease;
	display:grid;
	grid-template-columns: 110px 1fr;
	align-items: baseline;
	gap: 16px;
}
.dato::after{
	content:"";
	position:absolute; left:0; bottom:-1px;
	height:1px; width:0;
	background: var(--teal);
	transition: width .5s cubic-bezier(.22,.61,.36,1);
}
.dato:hover{ padding-left:10px; }
.dato:hover::after{ width:100%; }
.dato-label{
	font-size:10px;
	letter-spacing:.09em;
	text-transform:uppercase;
	color: var(--teal);
	font-weight:600;
	margin:0;
}
.dato-valor{
	font-size:15.5px;
	font-family:'Sora',sans-serif;
	font-weight:500;
	color: var(--ink);
	text-decoration:none;
	transition: color .3s ease;
	word-break: break-word;
}
a.dato-valor:hover{ color: var(--teal); }
.dato-texto{ margin:0; }


/* ===== FORMULARIO DE CONTACTO ===== */
.form-layout{
	max-width: var(--ancho);
	margin: 0 auto;
	display:grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 72px;
	align-items: start;
}
.form-lateral p{
	font-size:14.5px;
	line-height:1.75;
	color: var(--muted);
	margin: 20px 0 0;
	text-align: justify;
	hyphens: none;
	-webkit-hyphens: none;
}
.form-directo{
	margin-top: 34px;
	padding-top: 26px;
	border-top:1px solid var(--line);
	display:grid;
	gap: 16px;
}
.form-directo a{
	font-size:14.5px;
	font-family:'Sora',sans-serif;
	font-weight:500;
	color: var(--ink);
	text-decoration:none;
	transition: color .3s ease;
}
.form-directo a:hover{ color: var(--teal); }
.form-directo .dato-label{ margin-bottom:5px; }

.campo{ display:grid; gap:8px; margin-bottom: 20px; }
.campo label{
	font-size:11px;
	letter-spacing:.07em;
	text-transform:uppercase;
	font-weight:600;
	color: var(--muted);
}
.campo label .req{ color: var(--teal); }
.campo input,
.campo textarea{
	font-family:'Inter',sans-serif;
	font-size:14.5px;
	color: var(--ink);
	background: var(--paper);
	border:1px solid var(--line);
	border-radius:0;
	padding: 13px 15px;
	width:100%;
	transition: border-color .3s ease, box-shadow .3s ease;
	-webkit-appearance:none;
	appearance:none;
}
.campo textarea{ min-height: 150px; resize: vertical; line-height:1.6; }
.campo input:focus,
.campo textarea:focus{
	outline:none;
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(14,124,144,.12);
}
.campo input::placeholder,
.campo textarea::placeholder{ color:#B4B7B8; }

.form-enviar{
	display:flex;
	align-items:center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 6px;
}
.btn-enviar{
	font-family:'Inter',sans-serif;
	font-size:12.5px;
	font-weight:600;
	letter-spacing:.04em;
	background: var(--teal-deep);
	color:#fff;
	border:none;
	border-radius:999px;
	padding: 14px 34px;
	cursor:pointer;
	transition: background .25s ease, transform .25s ease;
}
.btn-enviar:hover{ background: var(--teal); transform: translateY(-1px); }
.form-nota{ font-size:11.5px; color:#9A9D9C; margin:0; }

.form-aviso{
	padding: 18px 22px;
	margin-bottom: 28px;
	font-size:14px;
	line-height:1.6;
	border-left:2px solid var(--teal);
	background: var(--gray-tint);
	color: var(--ink-soft);
}
.form-aviso.es-error{
	border-left-color:#B3563F;
	background:#FBF0ED;
	color:#7A3B2B;
}

/* ===== FOOTER ===== */
.site-footer{
	padding: 34px var(--pad);
	background: var(--gray-tint);
	border-top:1px solid var(--line);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap;
}
.site-footer img{ height:24px; opacity:.85; }
.site-footer p{ font-size:11.5px; color:#9A9D9C; margin:0; text-align: justify; }

/* ===== PÁGINA INTERNA DE PROFESIONAL ===== */
.profile-top{
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 34px var(--pad) 0;
}
.profile-hero{
	display:grid;
	grid-template-columns: minmax(200px, 270px) minmax(0, 1fr);
	gap: 56px;
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 22px var(--pad) 84px;
	align-items:start;
}
.profile-photo{
	aspect-ratio: 3/4;
	overflow:hidden;
	background: var(--gray-tint);
	position: sticky;
	top: 96px;
}
.profile-photo img{
	width:100%; height:100%;
	object-fit:cover;
	object-position:center top;
	display:block;
	/* En la ficha individual la foto va a color: es el retrato
	   principal de la persona, no una miniatura del listado. */
	filter: saturate(1.03);
}
.back-link{
	font-size:12px;
	color: var(--muted);
	text-decoration:none;
	display:inline-flex;
	align-items:center;
	gap:8px;
	transition: color .25s ease, gap .25s ease;
}
.back-link:hover{ color: var(--teal); gap:12px; }
.back-link svg{ width:12px; height:12px; }
.profile-role{
	font-size:11px;
	letter-spacing:.09em;
	text-transform:uppercase;
	color: var(--teal);
	font-weight:600;
	margin-bottom:8px;
}
.profile-name{
	font-size: clamp(30px, 3.8vw, 46px);
	font-weight:600;
	letter-spacing:-0.022em;
	line-height:1.1;
	margin:0 0 30px;
}
.profile-body p{
	font-size: 14.5px;
	line-height:1.75;
	color: #45494B;
	margin: 0 0 20px;
	text-align: justify;
	text-justify: inter-word;
	hyphens: none;
	-webkit-hyphens: none;
}
.profile-meta{
	margin-top: 34px;
	padding-top: 24px;
	border-top:1px solid var(--line);
	display:flex;
	gap: 56px;
	flex-wrap:wrap;
}
.meta-block .contact-label{ color: var(--teal); opacity:1; }
.meta-block p{
	font-size:14px;
	font-family:'Sora',sans-serif;
	font-weight:500;
	margin:0;
	color: var(--ink);
}
/* Distinción de Chambers, al cierre de la ficha */
.profile-sello{
	margin-top: 38px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}
.profile-sello img{
	width: 150px;
	height: auto;
	display: block;
}

/* Enlace con ícono de LinkedIn */
.enlace-in{
	display:inline-flex;
	align-items:center;
	gap:9px;
	text-decoration:none;
	color: var(--teal);
	transition: color .25s ease, gap .25s ease;
}
.enlace-in:hover{ color: var(--teal-deep); gap:12px; }
.icono-in{
	width:17px; height:17px;
	flex: 0 0 auto;
	display:block;
}

/* Dirección en la página de formulario */
.form-direccion{
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink);
	margin: 0;
}

.rank-badge{
	display:block;
	background: var(--gray-tint);
	border-left: 2px solid var(--teal);
	padding: 18px 22px;
	font-size:13.5px;
	line-height:1.65;
	color: var(--ink-soft);
	margin: 6px 0 20px;
	text-align: justify;
	hyphens: none;
	-webkit-hyphens: none;
}

/* ===== ANIMACIONES DE SCROLL ===== */
[data-reveal]{
	opacity:0;
	transform: translateY(26px);
	transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
	transition-delay: var(--d, 0s);
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="side"]{ transform: translateX(-16px); }
[data-reveal="side"].is-in{ transform:none; }
[data-reveal="card"]{ transform: translateY(22px) scale(.99); }
[data-reveal="card"].is-in{ transform:none; }

@media (prefers-reduced-motion: reduce){
	[data-reveal], [data-reveal].is-in,
	.slide-body p{
		opacity:1 !important;
		transform:none !important;
		transition:none !important;
	}
	.p-panel.is-open{ animation:none; }
	html{ scroll-behavior:auto; }
}

/* ===== RESPONSIVE ===== */
/* Menú: pasa a hamburguesa antes, para que el logo no choque con los enlaces */
@media (max-width: 1080px){
	.nav-toggle{ display:flex; }
	.btn-desktop{ display:none; }
	/* Sin backdrop-filter en móvil: crea un contenedor de posicionamiento
	   que impide que el panel del menú cubra la pantalla completa. */
	.topbar{
		padding: 18px var(--pad);
		gap: 10px;
		backdrop-filter: none;
		background: var(--paper);
	}
	.topbar .brand{ flex: 0 1 auto; min-width: 0; }
	.topbar .brand img{ height: 30px; width:auto; }
	.lang-switch{ margin-left:auto; margin-right: 4px; flex: 0 0 auto; }
	.lang-switch button{ font-size: 10px; padding: 6px 10px; }

	/* trama de fondo más discreta en pantallas chicas */
	.slide-media::before{ background-size: 220px 220px; opacity:.6; }

	.topbar nav{
		position: fixed;
		inset: 0;
		background: var(--paper);
		display:flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 2px;
		padding: 80px var(--pad) 40px;
		margin:0;
		overflow-y: auto;
		transform: translateY(-100%);
		transition: transform .5s cubic-bezier(.22,.9,.3,1);
		z-index: 70;
	}
	body.nav-open .topbar nav{ transform: translateY(0); }
	.topbar nav a{
		font-family:'Sora',sans-serif;
		font-size: 28px;
		font-weight:500;
		padding: 11px 0;
		opacity:0;
		transform: translateY(14px);
		transition: opacity .4s ease, transform .4s ease;
	}
	body.nav-open .topbar nav a{ opacity:1; transform:none; }
	.topbar nav a.is-current::after{ display:none; }
	body.nav-open .topbar nav a:nth-child(1){ transition-delay:.10s; }
	body.nav-open .topbar nav a:nth-child(2){ transition-delay:.16s; }
	body.nav-open .topbar nav a:nth-child(3){ transition-delay:.22s; }
	body.nav-open .topbar nav a:nth-child(4){ transition-delay:.28s; }
	body.nav-open .topbar nav a:nth-child(5){ transition-delay:.34s; }
	.topbar nav .nav-cta{
		display:inline-block;
		font-family:'Inter',sans-serif;
		font-size:12px;
		margin-top: 24px;
		padding: 13px 30px;
		color:#fff;
	}
	body.nav-open{ overflow:hidden; }

	.profile-hero{ grid-template-columns: 1fr; gap: 20px; }

	/* Tarjetas en dos columnas, más bajas para no quedar enormes */
	.areas-grid{ grid-template-columns: repeat(2, 1fr); }
	.p-card{ aspect-ratio: 16/11; }

	/* Contacto y formulario se apilan */
	.contacto-grid, .form-layout{ grid-template-columns: 1fr; gap: 40px; }
}


@media (max-width: 900px){
	:root{ --pad: 22px; }

	/* En celular la tarjeta es mucho más baja y el recorte centrado
	   corta lo que importa. Se sube el encuadre para que se vean las
	   aspas del molino y la cabeza del minero. */
	.p-card[data-area="0"] .p-foto{ background-position: center 24%; }
	.p-card[data-area="2"] .p-foto{ background-position: center 30%; }

	.section{ padding: 52px var(--pad); }
	.contacto-claro{ padding-top: 56px; padding-bottom: 62px; }
	.pag-encabezado, .contacto-intro{ margin-bottom: 30px; }
	.pag-banner{ min-height: 240px; }
	.siguiente{ margin-top: 38px; }

	/* Tarjetas desplegables en pantallas medianas */
	.p-panel ul{ columns: 1; }
	.p-card{ padding: 20px 18px; }
	.p-title{ font-size: 14.5px; }
	.p-num{ font-size:10px; margin-bottom:6px; }
	.p-icon, .p-icon::before, .p-icon::after{ width:14px; }
	.p-panel{ padding: 24px 22px 26px; }
	.p-panel h3{ font-size:14px; margin-bottom:16px; }
	.p-panel li{ font-size:12.5px; margin-bottom:12px; }

	.hero-slider{ height: 78vh; min-height: 460px; }
	.slide-body{ padding: 0 var(--pad) 64px; }
	.slider-dots{ bottom: 20px; left: var(--pad); right:auto; }

	.contacto-bajada{ max-width:100%; }
	.dato{ grid-template-columns: 96px 1fr; gap:12px; }
	.profile-top{ padding-top: 22px; }
	.profile-hero{ padding-top: 18px; }
	.profile-photo{ max-width: 260px; position: static; }
	.profile-meta{ gap: 28px; }
}

@media (max-width: 620px){
	/* Una sola columna: cada panel queda justo debajo de su tarjeta */
	.areas-grid{ grid-template-columns: 1fr; }
	.p-card{ order: var(--oc-m); aspect-ratio: auto; min-height: 96px; }
	.p-panel{ order: var(--op-m); }
	.p-card{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 22px 20px;
	}
	/* Título a la izquierda, signo + a la derecha */
	.p-foot{ order:1; width:auto; }
	.p-icon{ order:2; }
	.p-num{ display:inline; margin:0 10px 0 0; }
	.p-title{ display:inline; font-size: 15px; }
	/* La barra de arriba ya dice el nombre del área */
	.p-panel h3{ display:none; }
	.p-panel{ padding-top: 24px; }
}

/* Equipo: bajo 980px cada ficha ocupa el ancho completo, pero mantiene
   la foto al lado del texto para no alargar la página. */
@media (max-width: 980px){
	.team-grid{ grid-template-columns: 1fr; gap: 20px; }
	.team-card{ grid-template-columns: 180px minmax(0, 1fr); gap: 30px; }
	.team-bio{ max-width: 56ch; }
}

@media (max-width: 560px){
	.team-card{
		grid-template-columns: 118px minmax(0, 1fr);
		gap: 18px;
		padding: 16px;
	}
	.team-name{ font-size: 16.5px; }
	.team-bio{ font-size: 12.5px; margin: 10px 0 14px; }
	.link-more{ font-size: 11.5px; }
}