/* =========================================================================
   base.css — Tipografía global, contenedores y utilidades semánticas propias.
   Aplica el sistema de variables a los elementos base. Sin clases Tailwind.
   ========================================================================= */

body {
	font-family: var(--font-sans);
	color: var(--ink);
	background: var(--white);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	font-family: var(--font-heading);
	color: var(--navy);
	font-weight: var(--fw-heading);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 2.9rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }

p { color: var(--ink); }

a { color: var(--blue); text-decoration: none; }
a:hover,
a:focus { color: var(--blue-700); }

/* --- Fix ancho: el #content de GeneratePress es display:flex, así que el
   <main> de nuestras plantillas debe estirarse a todo el ancho en vez de
   encogerse y quedar pegado a la izquierda. --- */
.site-content > .site-main,
.site-content > main {
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
}

/* --- Secciones a sangre (full-bleed), sin márgenes entre ellas. GeneratePress
   añade margin-bottom a .site-main > * y padding lateral al contenedor; en
   nuestras plantillas las secciones ya gestionan su propio padding, así que lo
   anulamos para que se apilen pegadas y lleguen a los bordes. --- */
.page-template-page-inicio .site-main > *,
.page-template-page-colaboradores .site-main > *,
.page-template-page-particulares .site-main > *,
.page-template-page-area-legal .site-main > *,
.page-template-page-areas-legales .site-main > *,
.page-template-page-contacto .site-main > * {
	margin-top: 0;
	margin-bottom: 0;
}
.page-template-page-inicio .site-content,
.page-template-page-colaboradores .site-content,
.page-template-page-particulares .site-content,
.page-template-page-area-legal .site-content,
.page-template-page-areas-legales .site-content,
.page-template-page-contacto .site-content,
.page-template-page-inicio .site-main,
.page-template-page-colaboradores .site-main,
.page-template-page-particulares .site-main,
.page-template-page-area-legal .site-main,
.page-template-page-areas-legales .site-main,
.page-template-page-contacto .site-main {
	padding-left: 0;
	padding-right: 0;
}

/* --- "Page Hero" de GeneratePress (banda con el título de la página).
   Donde SÍ se muestra (fichas de servicio, posts, Sobre Abogalis) le damos un
   fondo azul suave consistente en vez del gris, y una altura estable. --- */
.page-hero {
	background: #ffffff;
	/* La cabecera va superpuesta (position:absolute, ~80px). Este padding-top
	   baja el título para que NO quede debajo del menú en posts y servicios. */
	padding-top: 110px;
	padding-bottom: 40px;
}
@media (max-width: 768px) {
	.page-hero { padding-top: 100px; }
}

/* Se oculta en las páginas donde NO queremos título: inicio, las dos landings,
   el listado de áreas (Servicios), el archivo del blog, buscador y contacto.
   (En las fichas de servicio y en cada post el título sí aparece.) --- */
.home .page-hero,
.blog .page-hero,
.search .page-hero,
.page-template-page-inicio .page-hero,
.page-template-page-colaboradores .page-hero,
.page-template-page-particulares .page-hero,
.page-template-page-area-legal .page-hero,
.page-template-page-areas-legales .page-hero,
.page-template-page-contacto .page-hero {
	display: none;
}

/* Contacto (203) y Nosotros (18516): mantener la banda (Page Hero) pero ocultar
   el TEXTO del título, para que queden iguales que el resto (con banda azul,
   sin título). visibility:hidden conserva la altura de la banda.
   Si cambian los IDs en producción, actualízalos o usa las Reglas de
   visualización del elemento Page Hero en GeneratePress. */
.page-id-203 .page-hero .inside-page-hero,
.page-id-18516 .page-hero .inside-page-hero {
	visibility: hidden;
}
/* En esas dos el título está oculto, así que no necesitan hueco: la cabecera
   queda ligeramente sobre el contenido (como te gusta). */
.page-id-203 .page-hero,
.page-id-18516 .page-hero {
	padding-top: 0;
	padding-bottom: 0;
}

/* Igualar la altura de la cabecera: la portada (front-page) añade un padding-top
   extra al contenedor que la hace más alta que el resto. Lo quitamos para que
   todas las páginas empiecen igual, justo bajo el menú (como en Servicios). */
.home .site-content {
	padding-top: 0;
}

/* --- Contenedor propio (coexiste con .gb-container de GenerateBlocks) --- */
.abogalis-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.abogalis-container--narrow { max-width: 820px; }

/* --- Secciones --- */
.abogalis-section {
	padding-block: var(--section-pad-y);
}

.abogalis-section--soft { background: var(--soft); }
.abogalis-section--sky { background: var(--sky); }
.abogalis-section--dark {
	background: var(--grad-dark);
	color: var(--on-dark);
}
.abogalis-section--dark h1,
.abogalis-section--dark h2,
.abogalis-section--dark h3 { color: var(--white); }
.abogalis-section--dark p { color: var(--on-dark); }

/* --- Eyebrow (etiqueta superior en versalitas, como la referencia) --- */
.eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #68adc7;
	margin-bottom: 14px;
}
.abogalis-section--dark .eyebrow { color: var(--cyan); }

/* --- Encabezado de sección --- */
.section-head {
	max-width: 720px;
	margin-bottom: clamp(32px, 5vw, 52px);
}
.section-head--center {
	margin-inline: auto;
	text-align: center;
}
.section-head p {
	color: var(--muted);
	font-size: 1.08rem;
	margin-top: 14px;
}
.abogalis-section--dark .section-head p { color: var(--on-dark-muted); }

/* --- Grids utilitarias semánticas (no Tailwind: clases con significado) --- */
.grid-2,
.grid-3 { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* --- Lista de checks con icono (check-list) --- */
.check-list {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.check-list li {
	position: relative;
	padding-left: 32px;
	color: var(--ink);
	font-weight: var(--fw-medium);
}
.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: var(--radius-pill);
	background: var(--sky);
	/* Palomita SVG en color --blue, embebida (sin dependencias externas). */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087ca7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px;
}
.abogalis-section--dark .check-list li { color: var(--on-dark); }
.abogalis-section--dark .check-list li::before {
	background-color: rgba(255, 255, 255, 0.12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313a7d6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* --- Accesibilidad --- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}

/* --- Responsive base --- */
@media (max-width: 860px) {
	.grid-2,
	.grid-3 { grid-template-columns: 1fr; }
}

/* --- Animación de aparición al hacer scroll (activada por theme.js) --- */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}