/* ══════════════════════════════════════════════════════════
   Kids&Deco by Lorraine
   Paleta sacada del logo: el corazón de patchwork.
   ══════════════════════════════════════════════════════════ */

:root{
  /* Acentos vivos — colores exactos del logo */
  --fucsia:  #D20267;
  --rosa:    #EB89A5;
  --coral:   #EB625E;
  --lima:    #CACD26;
  --mostaza: #FBA704;
  --turquesa:#18B1C5;
  --pizarra: #93A7B3;

  /* Base pastel */
  --crema:   #FEF9F2;
  --crema-2: #FBF2E6;
  --p-rosa:  #FBE6EC;
  --p-menta: #E4F1EE;
  --p-cielo: #E1F0F4;
  --p-mant:  #FDF0D6;

  /* Tinta */
  --tinta:   #24201F;
  --texto:   #5E5551;
  --tenue:   #9A908A;

  --linea: 1px dashed #D8CEC4;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;

  --f-display: "Fredoka", "Trebuchet MS", sans-serif;
  --f-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-hand: "Caveat", cursive;

  --ancho: 1180px;
  --pad: clamp(20px, 5vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--crema);
  color:var(--texto);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:var(--f-display);
  color:var(--tinta);
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
  font-weight:600;
}
h1{ font-size:clamp(2.05rem, 6.2vw, 4.1rem); }
h2{ font-size:clamp(1.9rem, 4.4vw, 3rem); }
h3{ font-size:1.32rem; font-weight:600; }

h1 em, h2 em{ font-style:normal; color:var(--fucsia); }

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--fucsia); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:8px; z-index:200;
  background:var(--tinta); color:#fff; padding:10px 16px; border-radius:var(--r-sm);
}
.skip:focus{ left:8px; }

:focus-visible{
  outline:3px solid var(--turquesa);
  outline-offset:3px;
  border-radius:4px;
}

/* ── Tipografía de apoyo ────────────────────────────────── */
.eyebrow{
  font-family:var(--f-body);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tenue);
  margin:0 0 .9em;
}
.eyebrow-light{ color:rgba(255,255,255,.72); }

.hand{
  font-family:var(--f-hand);
  font-size:1.4rem;
  color:var(--pizarra);
  line-height:1.3;
}

.lead{
  font-size:1.12rem;
  color:var(--texto);
}

/* ── Botones ────────────────────────────────────────────── */
.btn{
  --bg:var(--fucsia);
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--bg); color:#fff;
  font-family:var(--f-display); font-weight:600; font-size:1.02rem;
  padding:.85em 1.5em;
  border:0; border-radius:999px;
  text-decoration:none; cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.10);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(2px); box-shadow:0 4px 0 rgba(0,0,0,.10); }
.btn:active{ transform:translateY(5px); box-shadow:0 1px 0 rgba(0,0,0,.10); }
.btn-sm{ font-size:.9rem; padding:.62em 1.15em; box-shadow:0 4px 0 rgba(0,0,0,.09); }
.btn-lg{ font-size:1.16rem; padding:1em 1.9em; }

.wa-ico{
  width:1.05em; height:1.05em; flex:none;
  background:currentColor;
  -webkit-mask:var(--wa) center/contain no-repeat;
  mask:var(--wa) center/contain no-repeat;
  --wa:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.85 9.85 0 0 0 12.04 2Zm5.8 14.16c-.25.69-1.43 1.32-1.97 1.37-.5.05-.99.23-3.35-.7-2.82-1.11-4.6-3.99-4.74-4.17-.14-.19-1.13-1.5-1.13-2.86 0-1.36.71-2.03.97-2.31.25-.28.55-.35.74-.35.18 0 .37 0 .53.01.17.01.4-.6.62.48.23.55.78 1.9.85 2.04.07.14.11.3.02.48-.09.19-.14.3-.28.46-.14.16-.29.36-.41.48-.14.14-.28.29-.12.57.16.28.71 1.17 1.53 1.9 1.05.94 1.94 1.23 2.22 1.37.28.14.44.12.6-.07.16-.19.69-.81.88-1.08.19-.28.37-.23.62-.14.25.09 1.6.75 1.87.89.28.14.46.21.53.32.07.12.07.66-.18 1.35Z"/></svg>');
}

.tlink{
  font-family:var(--f-display);
  font-weight:500;
  color:var(--fucsia);
  text-decoration:none;
  border-bottom:2px solid rgba(210,2,103,.25);
  padding-bottom:1px;
  transition:border-color .15s ease;
}
.tlink:hover{ border-bottom-color:var(--fucsia); }

/* ══════════ TOPBAR ══════════════════════════════════════ */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:12px var(--pad);
  background:rgba(254,249,242,.92);
  backdrop-filter:blur(10px);
  border-bottom:var(--linea);
}
.brand img{ height:44px; width:auto; }
.topnav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,28px); }
.topnav > a:not(.btn){
  font-family:var(--f-display); font-weight:500; font-size:.98rem;
  color:var(--tinta); text-decoration:none;
}
.topnav > a:not(.btn):hover{ color:var(--fucsia); }
.topnav .ig{ color:var(--fucsia); }
@media (max-width:980px){ .topnav .ig{ display:none; } }
@media (max-width:760px){
  .topnav > a:not(.btn){ display:none; }
  .brand img{ height:36px; }
}

/* ══════════ HERO ════════════════════════════════════════ */
.hero{
  position:relative;
  text-align:center;
  padding:clamp(38px,6vw,68px) var(--pad) clamp(46px,6vw,72px);
  background:
    radial-gradient(120% 85% at 12% 0%,  var(--p-rosa) 0%, transparent 58%),
    radial-gradient(110% 80% at 92% 8%,  var(--p-cielo) 0%, transparent 55%),
    radial-gradient(120% 95% at 50% 100%, var(--p-mant) 0%, transparent 62%),
    var(--crema);
  overflow:hidden;
}
.hero h1{ max-width:15ch; margin:0 auto; }

/* ── LA GUIRNALDA (el elemento firma) ───────────────────── */
.garland{
  position:relative;
  margin:clamp(46px,7vw,70px) auto clamp(26px,4vw,38px);
  padding-top:34px;
  max-width:min(920px, 100%);
  min-height:150px;
}
.cord{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
  pointer-events:none;
}
.cord path{
  stroke:#C6B7A8;
  stroke-width:2.5;
  stroke-linecap:round;
}
.letters{
  position:relative; z-index:2;
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(4px,1vw,10px);
  flex-wrap:nowrap;
}

/* el tamaño vive en font-size para que el JS pueda achicarlo
   cuando el nombre es largo; --sz se cuelga de ahí */
.letters{ font-size:clamp(54px, 10.5vw, 122px); --sz:1em; }

.letter{
  position:relative;
  flex:none;
  padding-top:14px;
  transform:translateY(var(--dy,0)) rotate(var(--rot,0deg));
  transform-origin:50% -12px;
}
.letter.blank{ width:calc(var(--sz) * .3); }

/* la orilla de la tela recortada, por detrás */
.letter::before{
  content:attr(data-ch);
  position:absolute; top:14px; left:0;
  font-family:var(--f-display); font-weight:700;
  font-size:var(--sz); line-height:1;
  padding:.06em .05em .14em;
  color:#FFFCF7;
  -webkit-text-stroke:.085em #FFFCF7;
  paint-order:stroke fill;
  z-index:0;
  filter:drop-shadow(0 5px 6px rgba(90,66,52,.20));
}

/* La letra recortada en tela */
.glyph{
  position:relative; z-index:1;
  display:block;
  font-family:var(--f-display);
  font-weight:700;
  font-size:var(--sz);
  line-height:1;
  padding:.06em .05em .14em;
  color:transparent;
  background-color:var(--tela);
  background-image:var(--patron, none);
  background-size:var(--patron-sz, auto);
  background-position:var(--patron-pos, 0 0);
  -webkit-background-clip:text;
  background-clip:text;
}

/* el pinche de ropa */
.pin{
  position:absolute; z-index:3;
  top:2px; left:50%; margin-left:-6.5px;
  width:13px; height:34px;
  border-radius:5px 5px 3px 3px;
  background:linear-gradient(#EBCC9F, #D9B285 55%, #C59B6B);
  box-shadow:0 2px 4px rgba(80,60,50,.28);
}
.pin::before{
  content:""; position:absolute; left:50%; top:6px; margin-left:-.5px;
  width:1px; height:22px; background:rgba(120,88,58,.4);
}
.pin::after{
  content:""; position:absolute; left:-1px; top:14px;
  width:15px; height:2.5px; border-radius:2px;
  background:linear-gradient(#D8DBDE,#A4ABB1);
}

/* aparición de cada letra */
.letter{ animation:cuelga .42s cubic-bezier(.34,1.5,.5,1) backwards; }
@keyframes cuelga{
  from{ opacity:0; transform:translateY(calc(var(--dy,0px) - 22px)) rotate(calc(var(--rot,0deg) - 14deg)); }
}
@media (prefers-reduced-motion: reduce){
  .letter{ animation:none; }
}

/* ── input del nombre ───────────────────────────────────── */
.namebox{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; align-items:center;
}
#nameInput{
  font-family:var(--f-display); font-weight:500; font-size:1.1rem;
  color:var(--tinta);
  width:min(280px, 74vw);
  padding:.78em 1.2em;
  background:#fff;
  border:2px solid #E7DCD0;
  border-radius:999px;
  text-align:center;
}
#nameInput::placeholder{ color:var(--tenue); font-weight:400; }
#nameInput:focus{ border-color:var(--turquesa); outline:none; box-shadow:0 0 0 4px rgba(24,177,197,.16); }

.hero-hint{ margin:14px 0 0; }

.scroll-link{
  display:inline-block;
  margin-top:clamp(30px,5vw,46px);
  font-family:var(--f-display); font-weight:500;
  color:var(--texto); text-decoration:none;
}
.scroll-link:hover{ color:var(--fucsia); }

/* ══════════ TIRA COSIDA ═════════════════════════════════ */
.stitchstrip{
  overflow:hidden;
  background:var(--tinta);
  padding:13px 0;
}
.stitchstrip-track{
  display:flex; align-items:center; gap:26px;
  width:max-content;
  animation:desliza 34s linear infinite;
}
.stitchstrip span{
  font-family:var(--f-display); font-weight:500;
  font-size:.86rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--crema); white-space:nowrap;
}
.stitchstrip i{
  width:52px; height:2px; flex:none;
  background:repeating-linear-gradient(90deg, var(--mostaza) 0 8px, transparent 8px 14px);
}
@keyframes desliza{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .stitchstrip-track{ animation:none; } }

/* ══════════ SECCIONES ═══════════════════════════════════ */
.section{
  max-width:var(--ancho);
  margin:0 auto;
  padding:clamp(58px,8vw,96px) var(--pad);
}
.shead{ max-width:min(600px, 100%); margin-bottom:clamp(30px,4vw,48px); }
.shead h2{ max-width:none; }

/* ── tarjetas ───────────────────────────────────────────── */
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px,2.6vw,32px);
}
.card{
  background:#fff;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 12px 30px rgba(90,70,58,.09);
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:0 20px 38px rgba(90,70,58,.14); }
/* Los productos son fotos verticales: cuadrado les queda bien. */
.card > img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.card:nth-child(2) > img{ object-position:center 42%; }
.card:nth-child(3) > img{ object-position:center 42%; }

/* Nombres en tela va a lo ancho: la guirnalda es horizontal y en
   cualquier caja angosta se le cortan la primera y la última letra.
   De paso queda primero y más grande, que es el producto estrella. */
.card-ancha{ grid-column:1 / -1; }
.card-ancha > img{ aspect-ratio:2.5/1; object-position:center center; }
.card-ancha .card-body{ padding:24px clamp(22px,3vw,38px) 28px; }
.card-ancha .card-body p{ max-width:62ch; }
.card-body{ padding:22px 22px 26px; display:flex; flex-direction:column; gap:.7em; flex:1; }
.card-body p{ font-size:.97rem; flex:1; margin:0; }
.card-body .tlink{ align-self:flex-start; }

.card:nth-child(1) .card-body{ border-top:5px solid var(--fucsia); }
.card:nth-child(2) .card-body{ border-top:5px solid var(--turquesa); }
.card:nth-child(3) .card-body{ border-top:5px solid var(--mostaza); }
.card:nth-child(4) .card-body{ border-top:5px solid var(--lima); }

/* ── nombres en tela: el producto estrella ──────────────── */
.nombres{
  max-width:var(--ancho);
  margin:0 auto;
  padding:clamp(56px,7vw,92px) var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,64px);
  align-items:center;
}
.nombres-copy{ max-width:520px; position:relative; }
.nombres-copy .lead{ margin-bottom:1.3em; }
.nombres-nota{
  margin-top:1em;
  color:var(--pizarra);
  transform:rotate(-2deg);
  transform-origin:left;
}

.ticks.ticks-oscuro li{ color:var(--texto); }
.ticks.ticks-oscuro li::before{ background:var(--fucsia); }

.nombres-fotos{ display:grid; }
.nf{
  width:100%; height:auto;
  aspect-ratio:2.2/1;
  object-fit:cover;
  border-radius:var(--r-md);
  border:7px solid #fff;
  box-shadow:0 14px 30px rgba(90,66,52,.16);
}
.nf-a{ width:92%; transform:rotate(-1.8deg); }
.nf-b{ width:78%; margin:-7% 0 0 auto; transform:rotate(2.4deg); position:relative; z-index:2; }
.nf-c{ width:86%; margin:-6% auto 0 0; transform:rotate(-1.2deg); }

/* riel de nombres */
.nombre-rail{
  display:flex; gap:14px;
  overflow-x:auto;
  padding:20px var(--pad);
  background:var(--p-cielo);
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.nombre-rail img{
  flex:none;
  width:clamp(230px,28vw,330px);
  height:auto;
  aspect-ratio:2.1/1;
  object-fit:cover;
  border-radius:var(--r-md);
  scroll-snap-align:start;
  box-shadow:0 8px 20px rgba(90,70,58,.13);
}

/* ── morrales ───────────────────────────────────────────── */
.morrales{
  background:linear-gradient(150deg, #1E7F8C 0%, #17636F 55%, #124C57 100%);
  color:rgba(255,255,255,.88);
  padding:clamp(56px,7vw,90px) var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,64px);
  align-items:center;
}
.morrales h2{ color:#fff; }
.morrales h2 em{ color:var(--mostaza); }
.morrales .lead{ color:rgba(255,255,255,.85); }
.morrales .btn{ --bg:var(--mostaza); color:var(--tinta); }
.morrales-copy{ max-width:520px; margin-left:auto; }

.ticks{ list-style:none; margin:0 0 1.7em; padding:0; display:grid; gap:.55em; }
.ticks li{
  position:relative; padding-left:1.7em;
  font-size:1rem; color:rgba(255,255,255,.85);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:11px; height:11px; border-radius:50%;
  background:var(--lima);
}

.morrales-fotos{
  position:relative;
  max-width:520px;
  padding-bottom:52px;
}
.mf{
  border-radius:var(--r-md);
  box-shadow:0 22px 44px rgba(0,0,0,.3);
  object-fit:cover;
}
.mf-a{ width:58%; height:auto; aspect-ratio:3/4; }
.mf-b{
  position:absolute; right:0; bottom:34px;
  width:50%; height:auto; aspect-ratio:3/4;
  border:6px solid var(--crema);
}
.mf-note{
  position:absolute; left:2%; bottom:2px;
  color:var(--mostaza); font-size:1.55rem;
  transform:rotate(-4deg);
}

/* riel de morrales */
.morral-rail{
  display:flex; gap:14px;
  overflow-x:auto;
  padding:22px var(--pad);
  background:var(--p-menta);
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.morral-rail img{
  flex:none;
  width:clamp(150px,20vw,208px);
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:var(--r-md);
  scroll-snap-align:start;
  box-shadow:0 8px 20px rgba(90,70,58,.13);
}

/* ── pasos ──────────────────────────────────────────────── */
.pasos-sec{ }
.pasos{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:clamp(26px,3.5vw,44px);
}
.pasos li{ display:grid; gap:.55em; align-content:start; }
.pasos p{ font-size:.99rem; margin:0; }

.tile{ /* reutilizada arriba por las letras */ }
.pasos .tile{
  display:grid; place-items:center;
  position:relative;
  width:58px; height:58px;
  border-radius:11px;
  font-family:var(--f-display); font-weight:700; font-size:1.7rem;
  line-height:1; color:#fff;
  margin-bottom:.35em;
  transform:rotate(-4deg);
  box-shadow:0 5px 12px rgba(90,66,52,.18);
}
.pasos .tile::after{
  content:"";
  position:absolute; inset:5px;
  border:2px dashed rgba(255,255,255,.85);
  border-radius:7px;
}
.tile-1{ background-color:var(--fucsia); }
.tile-2{ background-color:var(--turquesa); }
.tile-3{ background-color:var(--mostaza); }

.pasos-cta{ margin-top:clamp(30px,4vw,44px); }

/* ── galería ────────────────────────────────────────────── */
.galeria-sec{ padding-top:clamp(26px,3.5vw,48px); }
.galeria{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px,1fr));
  gap:14px;
  grid-auto-flow:dense;
}
.galeria img{
  width:100%; height:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--r-md);
  box-shadow:0 8px 20px rgba(90,70,58,.10);
  transition:transform .25s ease;
}
.galeria img:hover{ transform:scale(1.025); }
.galeria img[src*="bolso-tote"]{ object-position:center 58%; }
.galeria .g-wide{ grid-column:span 2; aspect-ratio:2/1; object-position:center 45%; }
@media (max-width:520px){
  .galeria .g-wide{ grid-column:span 2; }
  .galeria{ grid-template-columns:repeat(2,1fr); }
}

.galeria-cta{
  margin-top:clamp(28px,4vw,42px);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}

/* ── quién soy ──────────────────────────────────────────── */
.quien{
  max-width:var(--ancho);
  margin:0 auto;
  padding:clamp(52px,7vw,92px) var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,72px);
  align-items:center;
  border-top:var(--linea);
}
.quien-fotos{
  position:relative;
  padding:0 0 60px 0;
}
.quien-fotos img{
  border-radius:var(--r-md);
  object-fit:cover;
  box-shadow:0 16px 34px rgba(90,70,58,.16);
}
.q-a{ width:74%; height:auto; aspect-ratio:3/4; }
.q-b{
  position:absolute; right:0; bottom:0;
  width:46%; height:auto; aspect-ratio:3/4;
  border:6px solid var(--crema);
}
.quien-copy{ max-width:520px; }
.quien-copy .lead{ margin-bottom:1.1em; }
.quien-copy p{ font-size:1rem; }
.firma{
  font-size:3.4rem;
  color:var(--fucsia);
  margin-top:.7em;
  transform:rotate(-3deg);
  transform-origin:left;
}

/* ── cierre ─────────────────────────────────────────────── */
.cierre{
  text-align:center;
  padding:clamp(58px,8vw,100px) var(--pad);
  background:
    radial-gradient(90% 120% at 50% 0%, #E0246F 0%, #B60459 62%, #94044A 100%);
  color:rgba(255,255,255,.9);
}
.cierre h2{ color:#fff; max-width:24ch; margin:0 auto .55em; }
.cierre h2 em{ color:var(--mostaza); }
.cierre .lead{ color:rgba(255,255,255,.85); max-width:44ch; margin:0 auto 1.9em; }
.cierre .btn{ --bg:#fff; color:var(--fucsia); }
.cierre-nota{
  margin-top:1.3em; font-size:.92rem; color:rgba(255,255,255,.68);
}

/* ── pie ────────────────────────────────────────────────── */
.pie{
  text-align:center;
  padding:clamp(38px,5vw,58px) var(--pad) 110px;
  background:var(--crema-2);
}
.pie-logo{ height:60px; width:auto; margin:0 auto 18px; }
.pie-links{ display:flex; gap:24px; justify-content:center; margin-bottom:12px; }
.pie-links a{
  font-family:var(--f-display); font-weight:500;
  color:var(--tinta); text-decoration:none;
  border-bottom:2px solid rgba(210,2,103,.3);
}
.pie-links a:hover{ color:var(--fucsia); }
.pie-nota{ font-size:.88rem; color:var(--tenue); margin:0; }

/* ── botón flotante ─────────────────────────────────────── */
.flotante{
  position:fixed; z-index:80;
  right:16px; bottom:16px;
  display:inline-flex; align-items:center; gap:.55em;
  background:#25A868; color:#fff;
  font-family:var(--f-display); font-weight:600; font-size:1rem;
  padding:.8em 1.3em;
  border-radius:999px;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.24);
  transition:transform .15s ease;
}
.flotante:hover{ transform:translateY(-2px); }
@media (max-width:600px){
  .flotante{ padding:.85em; }
  .flotante b{ display:none; }
  .flotante .wa-ico{ width:1.5em; height:1.5em; }
}

/* ══════════ RESPONSIVE ══════════════════════════════════ */
@media (max-width:900px){
  .nombres, .morrales, .quien{ grid-template-columns:1fr; }
  .nombres-copy, .morrales-copy, .quien-copy{ margin-left:0; max-width:none; }
  .nombres-fotos{ max-width:520px; margin:0 auto; }
  .morrales-fotos{ max-width:460px; margin:0 auto; }
  .quien-fotos{ max-width:460px; margin:0 auto; padding-bottom:70px; }
}
@media (max-width:820px){
  .cards{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .cards{ grid-template-columns:1fr; }
  .card-ancha > img{ aspect-ratio:2/1; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .shead{ max-width:none; }
  .galeria-cta{ flex-direction:column; align-items:flex-start; }
}