/* ==========================================================================
   TRASTEROS VANGUARD — responsive.css
   --------------------------------------------------------------------------
   Todas las adaptaciones por tamaño de pantalla.
   styles.css está escrito "mobile first": aquí solo se AÑADE.

   Puntos de ruptura
     420px   → móvil grande
     640px   → tablet vertical   → catálogo a 2 columnas
     900px   → tablet horizontal
     1024px  → escritorio        → catálogo a 3 columnas
     1140px  → aparece el menú horizontal del header
     1360px  → escritorio grande
   ========================================================================== */

/* ==========================================================================
   ≥ 420px — MÓVIL GRANDE
   ========================================================================== */
@media (min-width: 420px) {
  /* Ya hay sitio para el icono de cada objeto de la calculadora */
  .objeto__icono { display: flex; }
  .acciones .btn { flex: 0 1 auto; }
  .cookies__botones .btn { flex: 0 1 auto; }
}

/* ==========================================================================
   ≥ 640px — TABLET VERTICAL
   Catálogo: 2 columnas. Siguen siendo 3 trasteros por página.
   ========================================================================== */
@media (min-width: 640px) {
  :root { --gutter: 24px; }

  /* ---- LA REJILLA DEL CATÁLOGO: 2 columnas ---- */
  .trasteros__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }

  .form__fila--2 { grid-template-columns: 1fr 1fr; }

  .ventajas  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tamanos   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opiniones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras    { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .galeria__item--destacada { grid-column: span 2; aspect-ratio: 16 / 9; }

  .calc__objetos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  /* Con dos columnas hay menos sitio: botones algo más compactos
     (siguen por encima del mínimo accesible). */
  .stepper__btn { width: 38px; height: 38px; }

  .promo__claims { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; border-bottom: 1px solid var(--borde); }
  .promo__claim { border-bottom: 0; padding-bottom: 2.5rem; }

  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .panel { align-items: center; padding: 1.5rem; }
  .panel__caja { border-radius: var(--r-xl); }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__marca { grid-column: 1 / -1; }

  .flotantes { right: 1.5rem; bottom: 1.5rem; }
  .flotante--tel { display: flex; }
  .cookies { left: auto; right: 1.5rem; bottom: 1.5rem; }

  .panel__acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   ≥ 900px — TABLET HORIZONTAL
   ========================================================================== */
@media (min-width: 900px) {
  .ubicacion__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  /* Dos columnas: a la izquierda etiqueta, título, dirección y botones;
     a la derecha la fotografía con su pie. El texto se reparte entre el
     borde superior y el inferior de la foto, para que las dos columnas
     empiecen y terminen a la misma altura. */
  .ubicacion__intro {
    grid-template-columns: 1.08fr 0.92fr;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    row-gap: 2rem;
    align-items: start;
  }
  .ubicacion__cabecera { grid-column: 1; grid-row: 1; }
  .ubicacion__foto     { grid-column: 2; grid-row: 1 / span 2; }
  .ubicacion__datos    { grid-column: 1; grid-row: 2; align-self: end; }

  /* El mapa, debajo y a todo el ancho, con una altura proporcionada. */
  .mapa--ancho { aspect-ratio: 21 / 9; }
  .banda { grid-template-columns: 1fr 1fr; }
  .banda--invertida .banda__foto { order: 2; }
  .interiores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filtros { flex-direction: row; align-items: center; justify-content: space-between; }
  .hero--interior .hero__sub { font-size: var(--t-lead); }
}

/* ==========================================================================
   ≥ 1024px — ESCRITORIO
   Catálogo: LOS 3 TRASTEROS DE LA PÁGINA, UNO AL LADO DEL OTRO.
   ========================================================================== */
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
  /* ---- LA REJILLA DEL CATÁLOGO: 3 columnas ---- */
  .trasteros__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem; }

  .ventajas  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tamanos   { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .opiniones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* En escritorio caben más líneas sin que la tarjeta se dispare */
  .opinion__texto { --lineas: 6; }

  .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galeria__item--destacada { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

  /* Calculadora: objetos a la izquierda, resultado fijo a la derecha */
  .calc { grid-template-columns: 1.6fr 1fr; gap: 2rem; }
  .calc__resultado { position: sticky; top: calc(var(--header-h) + 1.5rem); }

  .contacto__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3rem; align-items: start; }
  .contacto__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }

  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; }
  .footer__marca { grid-column: auto; }

}

/* ==========================================================================
   ≥ 900px — MENÚ HORIZONTAL
   Con solo 4 opciones (Trasteros · Tamaños · Precios · Más) el menú cabe
   ya en tablet apaisada. Por debajo se usa el menú hamburguesa.
   ========================================================================== */
@media (min-width: 900px) {
  :root { --header-h: 72px; }

  .nav { display: block; }
  .header__tel { display: inline-flex; }
  .header__cta { display: inline-flex; }
  .header__movil { display: none; }
  .menu-movil { display: none; }

  /* El logotipo es horizontal: solo se ajusta la altura, nunca el ancho,
     para no deformarlo. */
  .logo img { height: 34px; }
}

/* ==========================================================================
   ≥ 1360px — ESCRITORIO GRANDE
   El contenido tiene un ancho máximo para que no se estire.
   ========================================================================== */
@media (min-width: 1360px) {
  /* El contenedor NO crece más: 1200px es el ancho máximo del contenido
     en toda la web, para que no se estire en pantallas grandes. */
  .nav__lista a,
  .nav__boton { padding: .5rem .85rem; font-size: .95rem; }
}

/* ==========================================================================
   PANTALLAS TÁCTILES
   Evita los estados hover "pegados".
   ========================================================================== */
@media (hover: none) {
  .btn:hover,
  .tarjeta__enlace:hover,
  .tamano:hover,
  .flotante:hover { transform: none; }
  .tarjeta__enlace:hover .tarjeta__foto img,
  .galeria__item:hover img { transform: none; }
}

/* ==========================================================================
   IMPRESIÓN
   ========================================================================== */
@media print {
  .header, .menu-movil, .flotantes, .cookies, .panel, .lightbox,
  .filtros, .paginacion, .calc__resultado, .btn { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
  .seccion { padding-block: 1.5rem; }
  .hero { padding-top: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .reveal { opacity: 1 !important; transform: none !important; }
}