/**
 * home.css — Tema felipeonate
 *
 * Estilos exclusivos de la plantilla Homepage (templates/page-home.php).
 * Se encola condicionalmente en functions.php solo cuando is_front_page()
 * o is_page_template('templates/page-home.php') es true.
 *
 * Depende de main.css (variables CSS :root) — declarada como dependencia
 * del handle 'pf-main' en wp_enqueue_style().
 *
 * Estructura del archivo:
 *   1. Hero                → Sección principal con typed effect y stats
 *   2. Clients             → Grid de logos de clientes
 *   3. Services            → Tarjetas de servicios
 *   4. Responsive          → Media queries para mobile / tablet
 *
 * @package felipeonate
 * @version 1.0.0
 */


/* ============================================
   1. HOMEPAGE — HERO
   ============================================ */
.hero {
  background: linear-gradient(45deg, var(--color-turquesa-500) 0%, var(--color-menta-500) 100%);
  padding: 5rem 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.hero .container { z-index: 1; }

.hero .bg-hero {
  background-image: url('../../img/ui/bg-hero.png');
  background-position: top left;
  background-repeat: repeat;
  background-size: 5%;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0.2) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0.2) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hero .hero-parallax-bg{position:absolute;top:-40%;left:0;width:100%;height:180%;background:linear-gradient(45deg, var(--color-turquesa-500) 0%, var(--color-menta-500) 100%);will-change:transform;}
@media (prefers-reduced-motion: reduce){.hero-parallax-bg{transform:none !important;}}

.hero h1 {
  font-family: 'Comfortaa', sans-serif;
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 4rem;
  color: var(--color-blanco);
  margin-bottom: 1.5rem;
  min-height: 8rem;
  text-transform: uppercase;
}

.hero h1.hero-text span.eltexto,
.hero h1.hero-text span.text {
  font-size: 3.6rem;
}

.hero h1.hero-text span.typed-cursor::before {
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  content: '';
  width: 3px;
  height: 3rem;
  margin: 0 0 0 6px;
  background: var(--color-blanco);
  opacity: 1;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.hero .hero-p-lead p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-blanco);
  margin-bottom: 2.5rem;
  max-width: 84%;
}
.hero .hero-p-lead p strong { font-weight: 700; }


.hero-img-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.hero-img-wrapper img {
  position: relative;
  z-index: 1;
  width: 420px;
  max-width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  border: 8px solid var(--color-blanco);
  filter: drop-shadow(0 24px 40px rgba(2,9,10,0.2));
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.hero-img-wrapper img.loaded {
  opacity: 1;
  transform: translateY(0);
}

@keyframes floatUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-stats { display: flex; gap: 1.5rem; margin-top: 2.5rem; }

.stat-badge {
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-200);
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  box-shadow: 0 4px 12px rgba(2,9,10,0.06);
  text-align: center;
}
.stat-badge .stat-num {
  font-family: 'Comfortaa', cursive;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-turquesa-500);
  line-height: 1;
  margin-bottom: 0.2rem;
}
.stat-badge .stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gris-500);
  letter-spacing: 0.03em;
}


/* ============================================
   2. HOMEPAGE — CLIENTS
   ============================================ */
.clients {
  padding: 5rem 0;
  background: var(--color-blanco);
}

/* Mapeo de clases Gutenberg → clases del design system */
.clients-content h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  color: var(--color-negro);
  text-align: center;
  margin-bottom: 1rem;
}
.clients-content p {
  font-size: 0.9375rem;
  text-align: center;
  color: var(--color-gris-500);
  max-width: 580px;
  margin: 0 auto 3rem;
}
.clients-content strong {
  color: var(--color-negro);
  font-weight: 700;
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  color: var(--color-negro);
  text-align: center;
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 0.9375rem;
  text-align: center;
  color: var(--color-gris-500);
  max-width: 580px;
  margin: 0 auto 3rem;
}
.section-subtitle strong { color: var(--color-negro); font-weight: 700; }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

.logo-cell {
  aspect-ratio: 4/3;
  border: 1.5px solid var(--color-gris-200);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blanco);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  overflow: hidden;
}
.logo-cell:hover {
  border-color: var(--color-turquesa-500);
  box-shadow: 0 4px 16px rgba(22,129,150,0.12);
  transform: translateY(-3px);
}
.logo-cell img {
  max-width: 65%;
  max-height: 44px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.3s, opacity 0.3s;
}
.logo-cell:hover img { filter: grayscale(0%); opacity: 1; }

/* Tamaños individuales por logo */
.logo-cell img.logo-facebook   { max-height: 99px; }
.logo-cell img.logo-google     { max-height: 48px; }
.logo-cell img.logo-movistar   { max-height: 72px; }
.logo-cell img.logo-dolcegusto { max-height: 80px; }
.logo-cell img.logo-whatsapp   { max-height: 99px; }

.logo-cell img.logo-bostonscien   { max-height: 99px; }
.logo-cell img.logo-fcbarcelona   { max-height: 80px; }
.logo-cell img.logo-bpichincha    { max-height: 99px; }
.logo-cell img.logo-vinciairports { max-height: 48px; }
.logo-cell img.logo-amadeus4devs  { max-height: 99px; }

.logo-cell img.logo-aplazame    { max-height: 99px; }
.logo-cell img.logo-saesa       { max-height: 48px; }
.logo-cell img.logo-transbank   { max-height: 99px; }
.logo-cell img.logo-newpudahuel { max-height: 99px; }
.logo-cell img.logo-bancochile  { max-height: 99px; }

.logo-cell img.logo-clarochile  { max-height: 46px; }
.logo-cell img.logo-entelchile  { max-height: 99px; }
.logo-cell img.logo-bancoestado { max-height: 99px; }
.logo-cell img.logo-inacapchile { max-height: 99px; }
.logo-cell img.logo-gascochile  { max-height: 99px; }

.logo-placeholder {
  font-family: 'Comfortaa', cursive;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gris-200);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ============================================
   3. HOMEPAGE — SERVICES
   ============================================ */
.services {
  padding: 5.5rem 0;
  background: linear-gradient(180deg, #e8f4f7 0%, #d0edf2 100%);
}

/* Mapeo de clases Gutenberg → clases del design system */
.services-content h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  color: var(--color-negro);
  text-align: center;
  margin-bottom: 1rem;
}
.services-content p {
  font-size: 0.9375rem;
  text-align: center;
  color: var(--color-gris-500);
  max-width: 580px;
  margin: 0 auto 3rem;
}
.services-content strong {
  color: var(--color-negro);
  font-weight: 700;
}

.service-card {
  background: var(--color-blanco);
  border-radius: 14px;
  border: 1.5px solid rgba(22,129,150,0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.25s, box-shadow 0.25s;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(22,129,150,0.15);
}

.service-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(140deg, var(--color-turquesa-400), var(--color-menta-800));
  display: block;
}

.service-card-img a {
  display: block;
  width: 100%;
  height: 100%;
}

.service-card-img .service-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(80%) hue-rotate(140deg) saturate(80%) opacity(0.4) blur(0.4px);
  transition: transform 0.4s ease, filter 0.4s ease;
}
.service-card:hover .service-card-thumb {
  filter: sepia(0%) hue-rotate(0deg) saturate(100%) opacity(1) blur(0.4px);
}

.service-card-body {
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-card h3 {
  font-size: 1.375rem;
  color: var(--color-negro);
  margin-bottom: 0.35rem;
}
.service-card .service-tagline {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gris-600);
  margin-bottom: 1rem;
}
.service-card p {
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  flex: 1;
  line-height: 1.7;
  color: var(--color-gris-500);
}



/* ============================================
   4. HOMEPAGE — RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
  .hero { padding: 3.5rem 0 2rem; text-align: center; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .hero .hero-p-lead p { max-width: 100%; }
  .hero-buttons { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-img-wrapper { justify-content: center; margin-top: 2.5rem; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }

  /* BL-33: .hero h1.hero-text span.eltexto/.text (línea ~63) fuerza
     3.6rem en TODOS los breakpoints — es el tamaño desktop del texto
     animado por typed.js. Sin este override, ese span nunca bajaba de
     57.6px y desbordaba el viewport en mobile (el texto se cortaba en
     el borde derecho). 2.5rem replica el mismo valor que ya usa
     .page-service .c-hero__title en services.css para el H1 "homologado"
     — Home nunca había tenido el equivalente para el span. */
  .hero h1.hero-text span.eltexto,
  .hero h1.hero-text span.text {
    font-size: 2.5rem;
  }

  /* BL-33: en mobile el patrón se veía casi imperceptible al 5% (mismo
     valor que desktop) — pedido explícito, sube a 25%. */
  .hero .bg-hero {
    background-size: 25%;
  }
}

@media (max-width: 575px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 1.6rem; line-height: 2rem; }

  /* BL-33: el span del texto animado (typed.js) no hereda el ajuste de
     arriba — sigue en 2.5rem (40px) del bloque de 991px. A ese tamaño
     fijo, la palabra más larga que rota (FIDELIZACIÓN, 12 caracteres)
     se salía del viewport en celulares angostos — el bug original que
     arreglamos en el bloque de 991px, repetido acá en un rango todavía
     más angosto.

     Pedido explícito de Felipe: mantener el span MÁS GRANDE que el
     resto del H1 (como en desktop/tablet — es la jerarquía visual
     intencional), pero sin que se salga del contenedor. Un valor fijo
     en rem no puede garantizar eso: 1.6rem entra en un iPhone SE de
     320px pero deja de tener sentido en un 575px (mucho margen
     desperdiciado), y cualquier valor fijo que sí aproveche los 575px
     vuelve a desbordar en los 320px más angostos del mismo rango.

     clamp(mínimo, preferido-en-vw, máximo) resuelve esto por
     construcción: el tamaño escala proporcional al ancho real del
     viewport en vez de ser un número fijo, así que el ANCHO RENDERIZADO
     del texto se mantiene proporcional al ancho disponible en todo el
     rango, no solo en el punto donde se probó.
       - 1.6rem: piso — nunca más chico que el resto del H1.
       - 9vw: el componente que realmente evita el desborde, escala con
         el viewport.
       - 2.25rem: techo — se mantiene por debajo del 2.5rem de tablet,
         para que la jerarquía de tamaños entre breakpoints siga siendo
         ascendente (mobile < tablet < desktop).
     No renderizo en navegador real desde acá — si la palabra más larga
     todavía roza el borde en el ancho más angosto que pruebes, bajar el
     techo (2.25rem) es el único número a tocar; el piso y el 9vw no
     deberían necesitar cambiar. */
  .hero h1.hero-text span.eltexto,
  .hero h1.hero-text span.text {
    font-size: clamp(2.6rem, 9vw, 3.25rem);
  }

  .hero h1.hero-text span.typed-cursor::before { height: 2.5rem; margin: 6px 0 0 6px; }
  .hero .c-btn { width: 100% }
  .hero-stats { flex-direction: column; align-items: center; }
  .hero-img-wrapper img { width: 280px; height: 280px; }
}