/* =========================================================
   RETESA — estilos SOLO de la página Nosotros (nosotros.php).
   La base (contenedor de 1344px, botones, tarjetas `.num-card`,
   franjas, pie) vive en css/servicios.css, hoja compartida del sitio.
   ========================================================= */

/* ---------- 2. Nuestra historia ---------- */
/* Refina la regla compartida `.split h2 em` (que ya la pone en rojo y en
   línea propia): aquí el cierre del titular va en cursiva. */
.split h2 em{ font-style:italic; }

/* ---------- 2.1 RETESA en cifras ---------- */
.stats-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; list-style:none; margin:0; padding:0; }
.stat-card{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:34px 18px 30px; background:#fff; border-radius:var(--radius); border:1px solid var(--line);
  border-top:3px solid var(--red); box-shadow:var(--shadow);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.stat-card .ico{ color:var(--amber); margin-bottom:14px; }
/* El mínimo bajó de 2.4rem a 2.1rem el 2026-10-14: con "480,000+" el número
   se desbordaba de la tarjeta en el tramo de 2 columnas (481–583 px). */
.stat-num{ display:flex; align-items:baseline; justify-content:center; font-size:clamp(2.1rem,3.6vw,3.2rem); font-weight:700; line-height:1.05; letter-spacing:-.02em; color:var(--red); font-variant-numeric:tabular-nums; }
.stat-num i{ font-style:normal; font-weight:500; margin-left:2px; }
.stat-label{ margin-top:10px; font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--body); }
@media (hover:hover){
  .stat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
}
@media (max-width:1000px){
  .stats-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
}
@media (max-width:480px){
  .stats-grid{ grid-template-columns:1fr; }
  .stat-card{ padding:26px 16px 24px; }
}

/* ---------- 3. Banda roja: foto grande + tres razones ---------- */
.why-band{
  padding-block:84px;
  background:linear-gradient(90deg, var(--red) 0%, #FF5A2E 100%);
  color:rgba(255,255,255,.9);
}
.why-band-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:stretch; }
.why-band-media{ overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.why-band-media img{ width:100%; height:100%; min-height:340px; object-fit:cover; }
.why-band h2{ color:#fff; }
.why-band .eyebrow{ color:#fff; }
.why-band .eyebrow::before{ background:#fff; }

/* Las tres cajas: mismo alto, mismo patrón, una debajo de otra. */
.reason-list{ display:grid; grid-auto-rows:1fr; gap:16px; list-style:none; margin:30px 0 0; padding:0; }
.reason{
  display:flex; gap:16px; padding:22px 24px; border-radius:var(--radius);
  border-left:3px solid rgba(255,255,255,.55); background:rgba(16,27,45,.16);
  transition:transform .4s var(--ease), background-color .4s var(--ease),
             border-left-color .4s var(--ease), box-shadow .4s var(--ease);
}
.reason .ico{ width:30px; height:30px; color:#fff; margin-top:3px;
  transition:transform .4s var(--ease); }
.reason h3{ color:#fff; font-size:1.06rem; margin-bottom:.35em;
  transition:transform .4s var(--ease); }
.reason p{ margin:0; font-size:.94rem; color:rgba(255,255,255,.9);
  transition:color .4s var(--ease); }

/* Al pasar el mouse la caja se levanta, el filo izquierdo se enciende y el icono
   responde. El halo que sigue al cursor lo pinta css/cursor-tracker.css. */
@media (hover:hover){
  .reason:hover{
    transform:translateY(-6px);
    background:rgba(16,27,45,.32);
    border-left-color:#fff;
    box-shadow:0 18px 38px rgba(16,27,45,.28);
  }
  .reason:hover .ico{ transform:translateY(-2px) scale(1.14); }
  .reason:hover h3{ transform:translateX(3px); }
  .reason:hover p{ color:#fff; }
}
@media (prefers-reduced-motion:reduce){
  .reason, .reason .ico, .reason h3, .reason p{ transition:none; }
}

/* ---------- 4. Servicios: las seis tarjetas, todas del mismo alto ---------- */
.nosotros-services .num-grid{ grid-auto-rows:1fr; }

/* ---------- 5. Diagnóstico previo a la cotización ---------- */
.diag-list{ display:grid; gap:20px; list-style:none; margin:28px 0 0; padding:0; }
.diag{ display:flex; gap:16px; }
.diag .ico{ width:30px; height:30px; color:var(--red); margin-top:3px; }
.diag h3{ font-size:1.06rem; margin-bottom:.3em; }
.diag p{ margin:0; font-size:.95rem; }

/* ---------- 6. A quién atendemos: la foto pasa a la izquierda ---------- */
/* Solo en dos columnas: en una sola, el orden natural (texto y luego foto)
   se mantiene igual que en el resto de la página. */
@media (min-width:1001px){
  .split.split-rev > :first-child{ order:2; }
  .split.split-rev > :last-child{ order:1; }
}

/* ---------- 7. Testimonios ---------- */
.testi{ background:var(--navy); color:rgba(255,255,255,.82); }
.testi-slider{ max-width:920px; margin-inline:auto; }

/* Sin JavaScript los tres testimonios se leen apilados, completos. */
.testi-slide{ position:relative; margin:0 0 34px; padding-top:52px; text-align:center; }
.testi-slide:last-child{ margin-bottom:0; }
/* Con JavaScript solo se ve el activo. */
.testi-slider.is-slider .testi-slide{ display:none; margin:0; }
.testi-slider.is-slider .testi-slide.is-active{ display:block; animation:testi-in .45s var(--ease) both; }
@keyframes testi-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

.testi-mark{
  position:absolute; left:50%; top:-4px; transform:translateX(-50%); z-index:0;
  font-size:7rem; line-height:1; font-weight:700; color:var(--red); opacity:.3;
  pointer-events:none; user-select:none;
}
.testi blockquote{ position:relative; z-index:1; margin:0; }
.testi blockquote p{ margin:0 auto 20px; max-width:74ch; font-size:1.06rem; color:rgba(255,255,255,.88); }
.testi figcaption{ position:relative; z-index:1; font-weight:600; color:#fff; }
.testi figcaption span{ display:block; margin-top:2px; font-size:.86rem; font-weight:400; color:rgba(255,255,255,.6); }

.testi-nav{ display:none; align-items:center; justify-content:center; gap:20px; margin-top:36px; }
.testi-slider.is-slider .testi-nav{ display:flex; }
.testi-btn{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:46px; height:46px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.28); background:transparent; color:#fff;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.testi-btn:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.testi-btn .ico{ width:20px; height:20px; }
.testi-prev .ico{ transform:rotate(180deg); }
.testi-dots{ display:flex; align-items:center; gap:10px; }
.testi-dot{
  width:12px; height:12px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.3); transition:background .2s var(--ease), transform .2s var(--ease);
}
.testi-dot:hover{ background:rgba(255,255,255,.6); }
.testi-dot[aria-current="true"]{ background:var(--red); transform:scale(1.25); }

/* ---------- Adaptación a pantallas ---------- */
@media (max-width:1000px){
  .why-band{ padding-block:70px; }
  .why-band-grid{ grid-template-columns:1fr; gap:36px; }
  .why-band-media img{ height:auto; min-height:0; aspect-ratio:16/9; }
}
@media (max-width:700px){
  /* La hoja compartida deja `.num-grid` en dos columnas a este ancho; aquí las
     seis tarjetas pasan a una sola columna. */
  .nosotros-services .num-grid{ grid-template-columns:1fr; }
  .why-band{ padding-block:60px; }
  .reason{ padding:20px; }
  .testi-slide{ padding-top:44px; }
  .testi-mark{ font-size:5rem; }
  .testi blockquote p{ font-size:1rem; }
}

/* ---------- Guarda de :hover en pantalla táctil ----------
   Sin puntero, el :hover se queda pegado después del toque: la flecha quedaba
   rellena de rojo y el punto aclarado. Aquí se devuelven a su estado de reposo.
   Las reglas de escritorio no se tocan. */
@media (hover:none){
  .testi-btn:hover{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
  .testi-dot:hover{ background:rgba(255,255,255,.3); }
}