/* =====================================================
   HILO MÁGICO · responsive.css
   Enlazar en el <head> (el orden ya no importa, pero lo ideal es después):
   <link rel="stylesheet" href="css/styles.css">
   <link rel="stylesheet" href="css/responsive.css">

   Todos los selectores llevan "html" delante: así ganan siempre a
   styles.css aunque este archivo se cargue antes.

   Breakpoints (max-width):
   1180 · 1024 (footer 3 col) · 960 (menú hamburguesa, hero, destacado, productos 2 col)
   768 (footer 2 col) · 640 (1 columna, colecciones apiladas) · 480 (móvil) · 360 (móvil chico)
   ===================================================== */

@media (max-width: 1180px) {
  html .nav { gap: 1.2rem; }
  html .nav ul { gap: 1rem; }
  html .tile__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
}

@media (max-width: 1024px) {
  html .container { width: min(100% - 2rem, var(--container)); }
  html .slide__title { max-width: 10em; }
  html .perk__icon { width: 60px; height: 60px; }
  html .perk__icon svg { width: 34px; height: 34px; }
  html .perk__text { font-size: .98rem; }
  html .tile__body { padding: 1.6rem 1.6rem 0; }
  html .tile__btn { left: 1.6rem; }
  html .products { gap: 1.1rem; }
  html .card__body { padding: 1rem 1.1rem 1.3rem; }
  html .card__title { font-size: 1.3rem; }
  html .footer__grid { grid-template-columns: repeat(3, 1fr); gap: 2.2rem 2rem; }
  html .footer__brand { grid-column: 1 / -1; }
  html .footer__brand p { max-width: 38em; }
}

@media (max-width: 960px) {
  /* Menú hamburguesa */
  html .burger { display: block; }
  html .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 1.5rem 1.5rem 2rem; background: var(--mint-wash); box-shadow: 0 20px 30px -20px rgba(14, 75, 62, .4); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .35s ease, visibility .35s; }
  html .nav.is-open { clip-path: inset(0); visibility: visible; }
  html .nav ul { flex-direction: column; align-items: flex-start; gap: .9rem; }
  /* Hero: flechas abajo para no tapar el titular */
  html .hero { height: clamp(440px, 58vw, 520px); }
  html .slide__content { margin-left: 1.25rem; padding-bottom: 2.5rem; max-width: 520px; }
  html .hero__arrow { top: auto; bottom: .7rem; translate: none; width: 36px; height: 36px; }
  html .hero__arrow--prev { left: 1.25rem; }
  html .hero__arrow--next { right: 1.25rem; }
  html .hero__dots { bottom: 1rem; }
  /* Colecciones: mismo esquema 2 columnas, alturas más bajas */
  html .collections { min-height: 0; grid-template-rows: repeat(2, minmax(210px, auto)); }
  html .tile--big { min-height: 440px; }
  html .tile--mint .tile__body { max-width: 66%; }
  html .tile--mint .tile__title { font-size: clamp(1.15rem, 2.7vw, 1.5rem); }
  html .tile__pattern { width: 34%; }
  /* Destacado en una columna */
  html .feature__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  html .feature__title { max-width: 12em; }
  html .feature__media { max-width: 620px; margin-inline: auto; aspect-ratio: 16 / 11; }
  html .feature__hearts { right: 0; width: 70%; }
  /* Productos: 2 columnas */
  html .products { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 641px) and (max-width: 960px) {
  /* La tercera tarjeta ocupa todo el ancho en horizontal para no quedar huérfana */
  html .card:last-child { grid-column: 1 / -1; flex-direction: row; }
  html .card:last-child .card__media { flex: 0 0 46%; aspect-ratio: auto; min-height: 280px; }
  html .card:last-child .card__body { justify-content: center; padding: 1.4rem 1.6rem; }
}

@media (max-width: 768px) {
  html .topbar__contact { gap: 1rem; }
  html .perks__list { gap: 1rem; }
  html .perk { gap: .75rem; }
  html .perk__icon { width: 52px; height: 52px; }
  html .perk__icon svg { width: 30px; height: 30px; }
  html .perk__text { font-size: .9rem; }
  html .footer__grid { grid-template-columns: repeat(2, 1fr); }
  html .footer__col:last-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  html .section { padding-block: 2.8rem; }
  html .perks { padding-block: 1.3rem; }
  html .perks__list { flex-direction: column; align-items: flex-start; gap: .9rem; }
  html .perk__icon { width: 56px; height: 56px; }
  html .perk__text { font-size: 1rem; }
  html .hero { height: 470px; }
  html .slide__title { font-size: clamp(1.75rem, 8.2vw, 2.4rem); max-width: 10em; }
  html .slide__kicker { font-size: .95rem; }
  html .slide__media::after { background: linear-gradient(180deg, rgba(15, 61, 51, .55), rgba(15, 61, 51, .3)); }
  html .collections { grid-template-columns: 1fr; grid-template-rows: none; gap: 1rem; }
  html .tile--big { grid-row: auto; min-height: 400px; }
  html .tile--mint { min-height: 190px; }
  html .tile--photo { min-height: 230px; }
  html .tile--mint .tile__body { max-width: 66%; }
  html .tile--mint .tile__title { font-size: clamp(1.2rem, 5.4vw, 1.55rem); }
  html .tile__pattern { width: 34%; }
  html .products { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  html .card__media { aspect-ratio: 16 / 10; }
  html .feature { padding-block: 2.8rem; }
  html .feature__title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  html .feature__media { aspect-ratio: 4 / 3; }
  html .feature .btn { align-self: stretch; }
  html .cta__box { min-height: 320px; }
  html .cta__content { padding: 2rem 1.5rem; max-width: none; }
  html .cta__title { font-size: clamp(1.7rem, 7.6vw, 2.2rem); }
  html .cta__content .btn { align-self: stretch; }
  html .cta__media::after { background: linear-gradient(180deg, rgba(15, 30, 26, .55), rgba(15, 30, 26, .45)); }
  html .yarn--a { width: 54vw; }
  html .yarn--b { width: 46vw; }
  html .yarn--c { width: 36vw; }
  html .yarn--d { width: 54vw; }
  html .yarn--e { width: 42vw; }
  html .footer { padding-top: 2.8rem; }
  html .footer__copy { margin-top: 2.2rem; }
}

@media (max-width: 480px) {
  html .topbar { font-size: .8rem; }
  html .topbar__inner { min-height: 38px; gap: .5rem; }
  html .topbar__social span { display: none; }
  html .topbar__contact .topbar__mail { display: none; }
  html .header__inner { min-height: 68px; }
  html .logo img { height: 48px; }
  html .logo__fallback { font-size: 1.8rem; }
  html .burger { width: 42px; height: 42px; }
  html .nav { padding: 1.2rem 1rem 1.6rem; }
  html .hero__arrow { width: 32px; height: 32px; }
  html .hero__arrow--prev { left: 1rem; }
  html .hero__arrow--next { right: 1rem; }
  html .slide__content { margin-left: 1rem; gap: .9rem; }
  html .slide__content .btn { padding: .8rem 1.4rem; font-size: .9rem; }
  html .tile__body { padding: 1.4rem 1.4rem 0; }
  html .tile__btn { left: 1.4rem; bottom: 1.3rem; }
  html .tile--photo .tile__btn { bottom: 1.2rem; }
  html .tile--big .tile__title { font-size: 1.5rem; }
  html .tile--photo .tile__title { font-size: 1.3rem; }
  html .card__body { padding: 1rem 1.1rem 1.2rem; }
  html .card__actions { grid-template-columns: 1fr; }
  html .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  html .footer__col:last-child { grid-column: auto; }
  html .footer__copy { font-size: .75rem; padding: 1rem; }
}

@media (max-width: 360px) {
  html .slide__title { font-size: 1.65rem; }
  html .slide__kicker { font-size: .9rem; }
  html .topbar__contact a { font-size: .76rem; }
  html .social { width: 26px; height: 26px; }
  html .section__title { font-size: 1.45rem; }
  html .tile--mint .tile__body { max-width: 68%; }
  html .tile--mint .tile__title { font-size: 1.15rem; }
  html .perk__icon { width: 50px; height: 50px; }
  html .perk__icon svg { width: 28px; height: 28px; }
  html .perk__text { font-size: .92rem; }
  html .btn { padding: .8rem 1.3rem; }
  html .cta__content { padding: 1.7rem 1.2rem; }
}