/* =========================================================
   RETESA — estilos SOLO de la página de inicio (index.php).
   La base (cabecera, contenedor de 1344px, botones, tarjetas,
   pie) vive en css/servicios.css, hoja compartida del sitio.
   ========================================================= */

/* ---------- Portada ---------- */
.home-hero{ min-height:min(calc(100vh - 128px), 780px); display:flex; align-items:center; }
.home-hero .hero-content{ width:100%; padding-block:96px 170px; }
.home-eyebrow{ display:inline-flex; align-items:center; gap:12px; margin:0 0 6px; font-size:.82rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.9); }
.home-eyebrow::before{ content:""; width:34px; height:2px; background:var(--red); }
.home-display{ margin:0; font-size:clamp(3.6rem,12vw,12rem); font-weight:700; line-height:.95; letter-spacing:-.03em; color:#fff; }
.home-display span{ color:var(--red); }
.home-legal{ margin:.5em 0 0; font-size:clamp(.78rem,1vw,.95rem); font-weight:500; letter-spacing:.14em; line-height:1.3; color:rgba(255,255,255,.72); }
.home-hero h1{ font-size:clamp(1.5rem,2.8vw,2.4rem); font-weight:600; line-height:1.2; margin:.45em 0 .5em; }
.home-hero .hero-sub{ font-size:clamp(1rem,1.3vw,1.12rem); }

/* ---------- Tarjetas de presentación (foto aparece al pasar el cursor) ---------- */
/* Orden de René: tarjetas más anchas y formulario más angosto, pegado a la derecha de la caja de 1344. */
@media (min-width:1201px){ .intro-grid{ grid-template-columns:minmax(0,1fr) 380px; } }
@media (min-width:421px){ .intro .qf-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.intro .qf-field{ min-width:0; }
.intro .qf-field input,.intro .qf-field select,.intro .qf-field textarea{ min-width:0; width:100%; }
.home-cards{ align-items:stretch; }
.hcard-body h2,.hcard-body p{ overflow-wrap:break-word; }
.hcard{ position:relative; display:flex; flex-direction:column; overflow:hidden; background:#fff; box-shadow:var(--shadow-lg); text-align:center; color:var(--body); }
.hcard-media{ position:absolute; inset:0; opacity:0; transition:opacity .35s var(--ease); }
.hcard-media img{ width:100%; height:100%; object-fit:cover; }
.hcard-media::after{ content:""; position:absolute; inset:0; background:rgba(16,27,45,.84); }
.hcard-body{ position:relative; flex:1; padding:36px 24px 26px; }
.hcard-body .ico{ color:var(--red); margin:0 auto 16px; transition:color .3s var(--ease); }
.hcard-title{ font-size:1.12rem; font-weight:600; margin-bottom:.5em; transition:color .3s var(--ease); }
.hcard-body p{ margin:0; font-size:.93rem; transition:color .3s var(--ease); }
.hcard-btn{ position:relative; display:block; padding:15px; background:var(--red); color:#fff; font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; transition:background .2s var(--ease); }
.hcard-btn:hover{ background:var(--red-dk); color:#fff; }
.hcard:hover .hcard-media,.hcard:focus-within .hcard-media{ opacity:1; }
.hcard:hover .hcard-title,.hcard:focus-within .hcard-title{ color:#fff; }
.hcard:hover .hcard-body p,.hcard:focus-within .hcard-body p{ color:rgba(255,255,255,.85); }
.hcard:hover .hcard-body .ico,.hcard:focus-within .hcard-body .ico{ color:var(--amber); }

/* ---------- Ajustes de secciones compartidas ---------- */
.why-copy .eyebrow{ color:var(--amber); }
.why-copy .eyebrow::before{ background:var(--amber); }
.svc-card h3{ min-height:2.5em; display:flex; align-items:center; justify-content:center; }
.post-card.is-cta .eyebrow{ color:var(--amber); }
.post-card.is-cta .eyebrow::before{ background:var(--amber); }
.post-card.is-cta .card-link{ color:#fff; }
.home-more{ margin-top:36px; }
.home-cta-actions{ display:flex; flex-wrap:wrap; gap:14px; }

@media (max-width:1200px){
  .home-hero{ min-height:0; }
  .home-hero .hero-content{ padding-block:90px; }
}
@media (max-width:700px){
  /* Hero en teléfono: 50 px más de aire arriba y 50 abajo (orden de René), para
     que la foto de fondo se vea más alta. Antes: 70 px por lado. */
  .home-hero .hero-content{ padding-block:120px; }
  .svc-card h3{ min-height:0; }
  .home-cta-actions,.home-cta-actions .btn{ width:100%; }
}

/* ---------- Guarda de :hover en pantalla táctil ----------
   Sin puntero, el :hover se queda pegado después del toque: la foto de la tarjeta
   se quedaba con el velo oscuro puesto y el texto en blanco. Aquí se devuelve cada
   efecto a su estado de reposo. Las reglas de escritorio no se tocan. */
@media (hover:none){
  .hcard:hover .hcard-media{ opacity:0; }
  .hcard:hover .hcard-title{ color:var(--ink); }
  .hcard:hover .hcard-body p{ color:var(--body); }
  .hcard:hover .hcard-body .ico{ color:var(--red); }
}

/* ---------- Indicadores (¿Por qué elegirnos?) ---------- */
.kpi .split{ align-items:center; }
.kpi-list{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:26px; }
.kpi-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:10px; }
.kpi-label{ font-weight:600; color:var(--ink); }
.kpi-pct{ font-weight:700; color:var(--red); font-variant-numeric:tabular-nums; }
.kpi-bar{ height:6px; border-radius:6px; background:var(--line); overflow:hidden; }
.kpi-bar i{ display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,var(--red-dk),var(--red)); transition:width 1.2s var(--ease) .25s; }
.kpi-item.is-in .kpi-bar i{ width:var(--v); }
.kpi-photo{ width:100%; height:auto; aspect-ratio:1000/1050; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
@media (prefers-reduced-motion:reduce){
  .kpi-bar i{ width:var(--v); transition:none; }
}
@media (max-width:1000px){
  .kpi-photo{ max-height:520px; }
}