/* ============================================
   MENOS ES MÁS — responsive
   Punto de corte principal en 900px: ahí el header
   cambia a menú y las grillas pasan a una columna.
   ============================================ */

@media (max-width: 1100px){
  .pie-grilla{grid-template-columns:1fr 1fr;gap:var(--space-xl) var(--space-lg);}
  .pasos{grid-template-columns:repeat(2,1fr);}
  .contacto-grilla{gap:var(--space-xl);}
}

@media (max-width: 900px){
  body{font-size:16px;}

  .nav{display:none;}
  .nav-cta{display:none;}
  .menu-boton{display:flex;}

  .hero{padding:clamp(56px,12vw,90px) 0 clamp(48px,9vw,72px);}
  .hero-acciones{gap:var(--space-sm);}
  .hero-acciones .btn{width:100%;}
  .hero-acciones .enlace-sutil{margin-top:var(--space-xs);}

  .servicio{grid-template-columns:1fr;gap:var(--space-sm);}
  .servicio-num{padding-top:0;font-size:1.2rem;}

  .trabajos{grid-template-columns:1fr;}
  .trabajo{padding:var(--space-md);}


  .contacto-grilla{grid-template-columns:1fr;}

  .titulo-seccion{margin-bottom:var(--space-lg);}
}

@media (max-width: 600px){
  /* El detalle abajo del nombre del canal: al lado no entra */
  .canal{flex-direction:column;align-items:flex-start;gap:4px;padding:16px 2px;}
  .canal-como{text-align:left;}

  .pasos{grid-template-columns:1fr;gap:var(--space-md);}
  .pie-grilla{grid-template-columns:1fr;gap:var(--space-lg);}
  .pie-abajo{flex-direction:column;align-items:flex-start;gap:10px;}
  .wa-flotante{width:50px;height:50px;right:16px;bottom:16px;}

  /* La franja se acelera un poco: en pantallas chicas recorre menos distancia */
  .franja-pista{animation-duration:26s;}
}

/* ---------- Hero con foto y bloques con imagen ---------- */
@media (max-width: 900px){
  .hero{min-height:clamp(480px, 78svh, 680px);}
  .trabajo-destacado{grid-template-columns:1fr;gap:0;}
  /* En una columna el destacado deja de tener foto al costado: vuelve a ser
     una portada arriba, con la proporción 16:9 del resto. */
  .trabajo-destacado .trabajo-foto,
  .trabajo-foto{margin:0;aspect-ratio:16 / 9;}
  .trabajo-destacado .trabajo-foto img{height:100%;}
}

/* ---------- Acordeón de servicios ----------
   El corte está en 900px, igual que en el original. Debajo de eso el
   acordeón no tiene sentido: en una pantalla táctil no hay hover, y cinco
   columnas de 70px no muestran nada. Pasa a cinco filas de 200px con todo
   el contenido a la vista, que es exactamente lo que hace su sitio. */
@media (max-width: 900px){
  .servicios{flex-direction:column;height:auto;}
  .panel{
    height:200px;
    flex:none !important;                 /* gana sobre el flex:3 del hover */
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,0.07);
  }
  .panel:last-child{border-bottom:none;}
  .panel:hover,.panel:focus-visible{flex:none !important;}
  .panel-num{opacity:1 !important;transform:none !important;}
  .panel-detalle{max-height:none !important;opacity:1 !important;}
}

/* Entre 900 y 1100 el acordeón sigue, pero más bajo: cinco columnas de
   540px de alto en una pantalla de tablet ocupan casi todo el viewport. */
@media (min-width: 901px) and (max-width: 1100px){
  .servicios{height:440px;}
}

@media (max-width: 800px){
  .planes{grid-template-columns:1fr;}
  .plan{padding:var(--space-md);}
}

@media (max-width: 900px){
  .trabajos{grid-template-columns:1fr;}
  .trabajo-cuerpo{padding:var(--space-md);}
  .filtros{gap:8px;}
  .filtro{padding:9px 16px;font-size:0.68rem;}
}

@media (max-width: 1000px){
  .planes{grid-template-columns:1fr;}
  .planes-intro{margin-top:0;}
}

/* ---------- Portfolio ---------- */
@media (max-width: 1000px){
  .pf-grilla{grid-template-columns:repeat(2,1fr);}
}
/* ---------- El estudio ---------- */
@media (max-width: 900px){
  /* La foto pasa arriba, a lo ancho. Antes era una banda de 240-380px: con
     una foto 3:5 eso deja ver el 25% del alto y las cabezas quedan afuera.
     Con 4:3 se ve el 45% y entran las dos figuras de la cabeza a mitad de
     pierna, sin que la imagen se coma la pantalla entera.
     El 32% ubica ese recorte del 18% al 63% del original, justo arriba de
     donde empiezan las cabezas (21%). */
  .estudio{grid-template-columns:1fr;}
  .estudio-foto{aspect-ratio:4 / 3;height:auto;}
  .estudio-foto img{object-position:center 32%;}
  .estudio-texto{padding:var(--seccion) clamp(20px,5vw,48px);}
}
@media (max-width: 520px){
  .estudio-razones li{grid-template-columns:1fr;gap:6px;}
  .estudio-razones span{font-size:1.3rem;}
}

/* ---------- Hosting ---------- */
@media (max-width: 1000px){
  .hosting-grilla{grid-template-columns:1fr;gap:var(--space-xl);}
  .franja-hosting .hosting-texto{max-width:60ch;}
  .hosting-panel{max-width:520px;}
}
@media (max-width: 480px){
  /* El dominio y la etiqueta SSL no entran en la misma línea */
  .hosting-panel-cabeza{flex-wrap:wrap;}
  .hosting-ssl{margin-left:18px;}
  .hosting-filas div{flex-direction:column;gap:2px;}
  .hosting-filas dd{text-align:left;}
}

/* ---------- Estrategia ---------- */
@media (max-width: 1100px){
  .intro-grilla{grid-template-columns:1fr;gap:var(--space-xl);}
  .intro-bajada{max-width:60ch;}
}
@media (max-width: 620px){
  /* Las cuatro tarjetas en una columna: a 150px de ancho las maquetas
     de barras y de A/B dejan de entenderse. */
  .intro-tarjetas{grid-template-columns:1fr;}
  .intro h2{font-size:clamp(1.8rem,7vw,2.4rem);}
  .intro-flujo li:not(:last-child)::after{width:20px;}
}

/* ---------- Hero del portfolio ---------- */
@media (max-width: 1000px){
  /* Una columna: primero el texto, después las maquetas.
     Se limita el ancho para que no queden gigantes al ocupar toda la fila. */
  .pf-portada-grilla{grid-template-columns:1fr;gap:var(--space-xl);}
  .pf-maquetas{max-width:560px;width:100%;}
}
@media (max-width: 560px){
  /* En celular sobra con dos: tres apiladas en 320px no se distinguen */
  .pf-maqueta-b{display:none;}
  .pf-maqueta-a{width:80%;}
  .pf-maqueta-c{left:12%;width:80%;}
  .pf-maquetas{aspect-ratio:1 / 0.78;}
  .pf-barra{height:22px;}
  .pf-barra span{font-size:0.52rem;}
}

/* ---------- Página de caso ---------- */
@media (max-width: 900px){
  .caso-grilla,.caso-grilla-3{grid-template-columns:repeat(2,1fr);}
  .caso-hitos{grid-template-columns:repeat(2,1fr);}
  .caso-tono-ancho{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  .caso-grilla,.caso-grilla-3{grid-template-columns:1fr;}
  .caso-hitos{grid-template-columns:1fr;}
  .caso-paleta span{width:72px;height:72px;}
}

@media (max-width: 620px){
  .pf-grilla{grid-template-columns:1fr;}
  .pf-portada{padding-top:clamp(110px,14vh,150px);}
  /* A una sola columna la captura puede ser más alta sin alargar la página */
  .pf-captura{aspect-ratio:16 / 10;}
}

/* ---------- Hero a sangre en pantallas chicas ---------- */
@media (max-width: 860px){
  /* 100svh menos el alto del header, para que no quede más alto que la pantalla */
  .hero{min-height:92svh;padding:clamp(96px,12vh,130px) 0 clamp(44px,7vh,72px);}
  /* En vertical se ve el 72% de la foto: anclada al 8% entra desde la
     cabeza hasta las rodillas sin cortar la cara. */
  .hero-foto{object-position:center 8%;}
  .hero-acciones{flex-direction:column;align-items:stretch;}
  .hero-acciones .btn{width:100%;}
}