/*
Theme Name: Ad Center
Description: Tema a la medida del sitio de Ad Center. Recreación 1:1 del sitio actual (Fase C), sin constructor visual. Ver CONTRATO-ADCENTER-WEB.md.
Author: Ad Center
Version: 0.2
Text Domain: adcenter
*/

/* ── Tokens: sacados de las variables globales de Elementor del sitio VIEJO, no inventados ── */
:root{
  --ac-tinta:#090055;       /* --e-global-color-primary */
  --ac-secundario:#54595F;
  --ac-texto:#2F2F2F;
  /* Los tres grises reales del sitio viejo, medidos por contexto (yo usaba uno solo): */
  --ac-gris-parrafo:#626262;   /* 18px/400 · descripciones                */
  --ac-gris-fuerte:#101010;    /* 18px/300 · párrafos de introducción     */
  --ac-gris-chico:#54595F;     /* 14-16px  · textos secundarios y viñetas */
  --ac-morado:#A652FF;
  --ac-morado2:#AB51FF;
  --ac-dorado:#FFB03A;
  --ac-verde:#61CE70;
  --ac-azul:#1670F9;
  --ac-oscuro:#101010;
  --ac-blanco:#FFFFFF;
  --ac-gris-claro:#F5F6FA;
  --ac-linea:#E7E9F3;
  --ac-degradado: linear-gradient(90deg, var(--ac-morado), var(--ac-dorado));
  /* El botón CTA usa OTRO degradado, azul→morado, tomado del CSS real del sitio viejo. */
  --ac-degradado-boton: linear-gradient(90deg, #1670F9 0%, #AB51FF 100%);
  --ac-fuente-titulo:'Gabarito', sans-serif;
  --ac-fuente-chica:'Albert Sans', sans-serif;
  --ac-fuente-pie:'Public Sans', sans-serif;   /* el viejo la usa solo en los enlaces del pie */
  --ac-radio:10px;
  --ac-ancho:1280px;   /* medido en el sitio viejo: 43 elementos usan 1280 */
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* El viejo usa Albert Sans para el texto y Gabarito SOLO en encabezados y cifras.
   Yo tenía Gabarito en todo: por eso 'no se veía igual' aunque los tamaños empataran. */
/* Interlíneas reales medidas: 14px→20 · 16px→24 · 18px/400→26 · 18px/300→45 · 32px→32.
   Yo tenía 1.6 parejo para todo, que da 22.4 en 14px y 28.8 en 18px. */
body{margin:0;font-family:var(--ac-fuente-chica);color:var(--ac-texto);background:var(--ac-blanco);line-height:1.45;font-size:16px;}
p,li,span,td,th,label,input,textarea,button{font-family:var(--ac-fuente-chica);}
/* Pero Gabarito SÍ va en: cifras, spans dentro de encabezados, menú, botones,
   etiquetas de formulario, nombre de cliente y negritas de título (medido en el viejo). */
h1 span,h2 span,h3 span,h4 span,h1 b,h2 b,h3 b,h4 b,
.contadores strong,.contadores span,.caso-stats strong,.caso-stats span,
.ac-nav a,.ac-boton,.ac-formulario label,.caso-cliente,.servicio-card .ver,
.stat-grande,.muro-titulo span{font-family:var(--ac-fuente-titulo);}
img{max-width:100%;height:auto;display:block;}
a{color:var(--ac-tinta);text-decoration:none;}
h1,h2,h3,h4,h5,h6{font-family:var(--ac-fuente-titulo);color:var(--ac-tinta);margin:0 0 16px;line-height:1.2;font-weight:600;}
/* Escala real del sitio viejo, medida elemento por elemento con navegador (no a ojo):
   títulos de sección 38px, no los 24px que trae el navegador por omisión. */
h2{font-size:38px;}
h3{font-size:22px;}
@media (max-width:900px){ h2{font-size:28px;} h3{font-size:20px;} }
p{margin:0 0 16px;}
ul{margin:0;padding:0;}
.ac-wrap{max-width:calc(var(--ac-ancho) + 48px);margin:0 auto;padding:0 24px;}  /* 1280 de contenido + gotera */
.ac-degradado-texto{font-weight:700;background:var(--ac-degradado);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.ac-boton{display:inline-flex;align-items:center;gap:8px;background:var(--ac-tinta);color:#fff;font-weight:500;font-size:16px;padding:14px 28px;border-radius:6px;transition:transform .15s ease, box-shadow .15s ease;}
.ac-boton:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(9,0,85,.4);}
.ac-boton.ac-boton-degradado{background:var(--ac-degradado);color:#fff;}
/* Los sombreros del viejo NO son texto suelto: son PÍLDORAS de fondo tinta con
   texto blanco (radio 4px, padding 2px 8px, 12px/700). Son 11 en toda la portada. */
.ac-eyebrow{display:inline-block;background:var(--ac-tinta);color:#fff;border-radius:4px;padding:2px 8px;font-family:var(--ac-fuente-chica);font-weight:700;font-size:12px;line-height:12px;letter-spacing:normal;text-transform:none;margin:0 0 8px;}
/* cuando el bloque va centrado, la píldora se centra sola */
.ac-centrado .ac-eyebrow{margin-left:auto;margin-right:auto;}
.ac-centrado{text-align:center;}
.ac-centrado .caso-fila,.ac-centrado .resenas-grid,.ac-centrado .muro-grid,.ac-centrado .tech-grid{text-align:left;}
/* "Se Requiere Cita Previa" es la única píldora con otro color en el viejo. */
.ac-eyebrow-rosa{background:rgb(255,233,227);color:rgb(132,76,60);}
.ac-seccion{padding:120px 0;}   /* medido en el viejo: 120px arriba y abajo, no 64 */
.ac-seccion-tinta{background:var(--ac-tinta);color:#fff;}
.ac-seccion-tinta h2,.ac-seccion-tinta h3{color:#fff;}
@media (max-width:900px){ .ac-seccion{padding:56px 0;} }


/* Escala de texto del sitio viejo, por tamaño (medida elemento por elemento). */
.ac-t14{font-size:14px;line-height:20px;color:var(--ac-gris-chico);}
.ac-t16{font-size:16px;line-height:24px;color:var(--ac-gris-chico);}
.ac-t18{font-size:18px;line-height:26px;color:var(--ac-gris-parrafo);}
.ac-t18-suave{font-size:18px;font-weight:300;line-height:45px;color:var(--ac-gris-fuerte);}

/* SVGs sueltos del contenido heredado (iconos de WhatsApp, etc.) sin tamaño fijo: sin esto pintan gigantes. */
.entry-content svg,.post-cuerpo svg,.caso-cuerpo svg{width:20px;height:20px;display:inline-block;vertical-align:middle;fill:currentColor;}

/* Salto de línea que solo se ve en pantallas muy chicas (igual que el sitio viejo). */
@media (min-width:361px){ .mini-screen{display:none;} }

/* Aparición al hacer scroll. Visible por defecto: si el JS no corre, no se pierde nada
   (memoria animacion-scroll-a-prueba-de-fallos). Solo se oculta cuando JS agrega .armado. */
.fade-in.armado{opacity:0;transform:translateY(20px);transition:opacity .8s ease-out, transform .8s ease-out;}
.fade-in.armado.visible{opacity:1;transform:translateY(0);}

/* Renglón que se teclea en el hero (Typed.js). Lo traen la portada y 4 páginas de servicio,
   por eso vive aquí y no dentro de la plantilla de la portada. */
/* Medido en el viejo: 48px el contenedor, 54.4px el texto que se teclea, interlínea 72px
   y márgenes NEGATIVOS (-42 arriba, -12 abajo) para pegarlo al H2 de arriba. */
/* El viejo usa margen negativo (-42/-12) porque su H2 trae otra interlínea; copiarlo
   literal aquí encimaba el renglón con el párrafo de abajo. Se conserva el TAMAÑO real
   (54.4px) y se ajusta el espaciado para que no se traslape. */
.autotyping{font-family:var(--ac-fuente-titulo);color:var(--ac-tinta);font-size:54.4px;font-weight:600;line-height:1.15;margin:0 0 18px;}
.autotyping .typing_text,.autotyping .typed-cursor{font-size:inherit;line-height:inherit;}
.autotyping .typing_text{font-size:inherit;font-weight:inherit;}
.autotyping .typed-cursor{opacity:1;color:var(--ac-morado);}
@media (max-width:1200px){ .autotyping{font-size:38px;} }
@media (max-width:900px){ .autotyping{font-size:32px;} }
@media (max-width:600px){ .autotyping{font-size:26px;} }

/* ---------- Bloques reutilizables (los 3 que el sitio viejo embebe por shortcode de
   Elementor: muro de logos 865, reseñas 923, formulario 930). Viven aquí y no en la
   portada porque los usan también 5 páginas de servicio. ---------- */

.muro-logos{padding:30px 0 8px;}
.muro-titulo{text-align:center;font-size:38px;font-weight:500;line-height:46px;margin:0 auto 14px;max-width:586px;}
@media (max-width:700px){ .muro-titulo{font-size:28px;} }
.muro-intro{text-align:center;color:var(--ac-secundario);font-size:13px;margin-bottom:20px;max-width:720px;margin-left:auto;margin-right:auto;}
/* Medido en el viejo: 7 por fila, 8 filas, ~1400px de alto. Los logos van a 160px de
   ancho y hasta 104 de alto, a color (yo los tenía topados a 34px y desaturados). */
/* Medido por la posición real de cada logo: 5 columnas (centros en 318/520/721/922/1122),
   rejilla de ~1004px centrada dentro del contenedor de 1280. Yo tenía 7. */
.muro-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:40px 20px;align-items:center;justify-items:center;max-width:1004px;margin:0 auto;}
/* El viejo fija el ANCHO en 160px y deja caer el alto (31-104px según el logo).
   Con max-height los logos altos se encogían de más (Honda salía a 64px). */
/* Caja de 160x104 con contain: así cada logo se ve del tamaño correcto sin que los
   altos (Honda, Mazda) se disparen ni los SVG sin dimensiones se encojan. */
.muro-grid img{width:160px;max-width:100%;height:104px;object-fit:contain;}
@media (max-width:1024px){ .muro-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:767px){ .muro-grid{grid-template-columns:repeat(3,1fr);} }

.resenas{background:var(--ac-gris-claro);}
.resenas-intro{text-align:center;max-width:640px;margin:0 auto 32px;}
.resenas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.resena{background:#fff;border:1px solid var(--ac-linea);border-radius:14px;padding:22px;}
.resena .estrellas{color:var(--ac-dorado);font-size:14px;margin-bottom:8px;}
.resena b{display:block;font-size:14px;}
.resena .fecha{font-size:12px;color:var(--ac-secundario);margin-bottom:8px;}
.resena p{font-size:13.5px;color:var(--ac-texto);margin:0;}
@media (max-width:1024px){ .resenas-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:767px){ .resenas-grid{grid-template-columns:1fr;} }

.contacto-home{background:var(--ac-tinta);color:#fff;padding:90px 0;}
.contacto-home-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.contacto-home h2{color:#fff;}
.contacto-home p{color:rgba(255,255,255,.75);}
.contacto-home a{color:#fff;}
.atiende{display:flex;align-items:center;gap:12px;margin:20px 0;}
.atiende img{width:48px;height:48px;border-radius:99px;object-fit:cover;}
.atiende-etiqueta{font-size:12px;color:rgba(255,255,255,.6);}
.contacto-home .ac-formulario input,.contacto-home .ac-formulario textarea{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;}
.contacto-home .ac-formulario label{color:rgba(255,255,255,.7);}
@media (max-width:767px){ .contacto-home-grid{grid-template-columns:1fr;} }

/* Base del formulario: antes vivía SOLO dentro de page-contacto.php, así que el
   formulario de la portada salía sin estilo y el aviso de error/éxito sin caja. */
.ac-formulario label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ac-secundario);}
.ac-formulario input,.ac-formulario textarea{width:100%;border:1px solid var(--ac-linea);border-radius:8px;padding:12px 14px;font-family:var(--ac-fuente-titulo);font-size:15px;margin-bottom:16px;}
.ac-formulario input:focus,.ac-formulario textarea:focus{outline:2px solid var(--ac-morado);border-color:transparent;}
.ac-formulario .oculto{position:absolute;left:-9999px;}
.ac-aviso{padding:14px 16px;border-radius:8px;margin-bottom:18px;font-size:14px;}
.ac-aviso-ok{background:#E9FBEE;color:#166534;}
.ac-aviso-error{background:#FDECEC;color:#B42318;}
.ac-boton-ancho{border:0;width:100%;justify-content:center;cursor:pointer;}

/* Botón con degradado y brillo al pasar el mouse, igual que el CTA del hero viejo. */
.gradient-button .ac-boton{background:var(--ac-degradado-boton);background-size:200%;background-position:50% 50%;font-size:18px;font-weight:600;border-radius:4px;transition:all .5s ease, background-position .5s ease;flex-direction:row-reverse;gap:10px;}
/* El icono de WhatsApp va a la DERECHA del texto (icon_align row-reverse en el original). */
.gradient-button .ac-boton svg{width:20px;height:20px;fill:currentColor;flex-shrink:0;}
.gradient-button .ac-boton:hover{background-position:25% 50%;transform:translateY(-6px);}
.entry-content a:has(svg),.post-cuerpo a:has(svg),.caso-cuerpo a:has(svg){display:inline-flex;align-items:center;gap:8px;background:var(--ac-tinta);color:#fff;padding:12px 22px;border-radius:8px;font-weight:600;text-decoration:none;margin:12px 0;}
.entry-content a:has(svg) svg,.post-cuerpo a:has(svg) svg,.caso-cuerpo a:has(svg) svg{width:18px;height:18px;fill:#fff;}