/* ==========================================================
   Páginas de producto (se apoya en styles.css: tokens,
   encabezado, pie y movimiento compartido).
   Medidas del Figma "Aceite Corporal" 1440 de ancho; --u escala.
   ========================================================== */

.page.prod { height: auto; }
.prod-body { padding-top: calc(var(--u) * 181); }

/* ---------- banner ---------- */
.p-banner {
  position: relative; z-index: 1;
  width: calc(var(--u) * 1336); height: calc(var(--u) * 345);
  margin: calc(var(--u) * -31) auto 0;
  border-radius: calc(var(--u) * 28); overflow: hidden; background: var(--lavender);
}
.p-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }

/* ---------- marquesina ---------- */
.pmarquee {
  position: relative; left: calc(50% - 50vw); width: 100vw; overflow: hidden;
  margin-top: calc(var(--u) * 38); height: calc(var(--u) * 44);
}

/* ---------- producto ---------- */
.p-hero { position: relative; margin-top: calc(var(--u) * 56); height: calc(var(--u) * 653); }
.p-band {
  position: absolute; left: calc(var(--u) * 37.5); top: calc(var(--u) * 361);
  width: calc(var(--u) * 1365); height: calc(var(--u) * 292);
  border-radius: calc(var(--u) * 28); background: rgba(194, 191, 228, .26);
}
.p-kit {
  position: absolute; left: calc(var(--u) * 77); top: 0; z-index: 2;
  height: calc(var(--u) * 621); width: auto; object-fit: contain;
}
.p-info { position: absolute; left: calc(var(--u) * 547.7); top: calc(var(--u) * 26); width: calc(var(--u) * 852); z-index: 2; }
.p-info h1 { margin: 0; font-weight: 700; font-size: calc(var(--u) * 28); line-height: 1.2; }
.p-info .t1, .p-info .t2 { display: block; }
.p-info .t1 { color: rgba(0, 0, 0, .6); }
.p-info .t2 { color: #8785ca; }
.p-info .hi { margin-top: calc(var(--u) * 20); font-size: calc(var(--u) * 20); line-height: 1.34; color: rgba(255, 131, 139, .8); font-weight: 400; }
.p-info .para { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 20); line-height: 1.34; font-weight: 300; color: rgba(0, 0, 0, .7); }
.p-info .para b { font-weight: 500; }

.p-facts {
  position: absolute; left: calc(var(--u) * 541.7); top: calc(var(--u) * 386); z-index: 2;
  display: flex; gap: calc(var(--u) * 90); color: #8785ca;
}
.claims li, .ing li { list-style: none; }
.claims li { font-size: calc(var(--u) * 24); font-weight: 600; line-height: 1.2; margin-bottom: calc(var(--u) * 26); }
.claims li::before { content: "· "; }
.ing h2, .ing li, .ing .net { color: var(--iris-deep); }
.ing h2 { margin: 0 0 calc(var(--u) * 10); font-size: calc(var(--u) * 22); font-weight: 600; }
.ing ul { display: grid; gap: calc(var(--u) * 6); }
.ing li { font-size: calc(var(--u) * 20); font-weight: 400; line-height: 1.25; display: flex; align-items: center; gap: calc(var(--u) * 10); }
.ing li::before { content: ""; width: calc(var(--u) * 14); height: calc(var(--u) * 14); flex: none; background: url("assets/heart-mini.svg") center / contain no-repeat; }
.ing .net { margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 20); font-weight: 400; }

.p-seal {
  position: absolute; left: calc(var(--u) * 1104.5); top: calc(var(--u) * 301); z-index: 3;
  width: calc(var(--u) * 256); height: calc(var(--u) * 256); border-radius: 50%;
  animation: spin 38s linear infinite;
  filter: drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 18) rgba(79, 81, 137, .22));
}

/* ---------- galería ---------- */
.p-gallery {
  margin: calc(var(--u) * 87) 0 0 calc(var(--u) * 34);
  width: calc(var(--u) * 1345);
  display: grid; grid-template-columns: 657fr 314fr 315fr; grid-template-rows: 1fr 1fr;
  gap: calc(var(--u) * 29); height: calc(var(--u) * 777);
}
.g-video, .g-tile { position: relative; border-radius: calc(var(--u) * 30); background: var(--lavender); overflow: hidden; }
.g-video { grid-row: 1 / 3; }
.g-video > img { position: absolute; inset: 8% 22%; width: 56%; height: 84%; object-fit: contain; opacity: .2; }
.g-play {
  position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 148); height: calc(var(--u) * 148);
  translate: -50% -50%; padding: 0; border: 0; background: none; cursor: pointer;
  transition: scale .3s var(--ease-out);
}
.g-play:active { scale: .94; }
@media (hover: hover) and (pointer: fine) { .g-play:hover { scale: 1.08; } }
.g-hint {
  position: absolute; left: 50%; bottom: calc(var(--u) * 28); translate: -50% 0;
  margin: 0; font-size: calc(var(--u) * 18); font-weight: 400; color: #fff; opacity: .9; white-space: nowrap;
}
.g-tile img { position: absolute; inset: 4% 12%; width: 76%; height: 92%; object-fit: contain; transition: scale .8s var(--ease-out); }
.g-tile.t2 img { scale: 1.55; transform-origin: 78% 40%; }
.g-tile.t3 img { scale: 1.55; transform-origin: 22% 40%; }
.g-tile.t4 img { scale: .88; rotate: -4deg; }
@media (hover: hover) and (pointer: fine) {
  .g-tile:hover img { scale: 1.06; }
  .g-tile.t2:hover img, .g-tile.t3:hover img { scale: 1.68; }
  .g-tile.t4:hover img { scale: .94; }
}

/* ---------- línea completa ---------- */
.p-line { margin-top: calc(var(--u) * 110); }
.p-torn {
  position: relative; left: calc(50% - 50vw); width: 100vw; height: calc(var(--u) * 287);
  display: grid; place-items: center;
}
.p-torn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.p-torn h2 { position: relative; margin: 0; font-size: calc(var(--u) * 48); font-weight: 500; line-height: 1.15; color: #fff; text-align: center; }

.p-cards { display: flex; justify-content: center; gap: calc(var(--u) * 120); margin-top: calc(var(--u) * 70); }
.pcard { position: relative; width: calc(var(--u) * 440); display: grid; justify-items: center; }
.pcard-img { display: block; transition: transform .6s var(--ease-out); }
.pcard-img img { height: calc(var(--u) * 560); width: auto; object-fit: contain; }
@media (hover: hover) and (pointer: fine) { .pcard:hover .pcard-img { transform: translateY(calc(var(--u) * -10)) rotate(-1deg); } }
.pbadge { position: absolute; left: calc(var(--u) * 7); top: calc(var(--u) * 512); width: calc(var(--u) * 78); height: calc(var(--u) * 68); z-index: 3; transition: transform .5s var(--ease-out); }
.pbadge img { position: absolute; }
.pbadge > img:first-child { inset: 0; width: 100%; height: 100%; }
.pbadge .b2 { left: calc(var(--u) * 6); top: calc(var(--u) * 5); width: calc(var(--u) * 67); height: calc(var(--u) * 57); }
.pbadge span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 calc(var(--u) * 36) / 1 var(--f-body); color: #fff; }
.pcard:hover .pbadge { transform: rotate(-8deg) scale(1.1); }
.ppill {
  position: relative; z-index: 2; margin-top: calc(var(--u) * -14);
  width: calc(var(--u) * 388); height: calc(var(--u) * 106);
  display: grid; place-items: center; text-align: center;
  transition: transform .5s var(--ease-out);
}
.ppill img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ppill span { position: relative; font: 300 calc(var(--u) * 38) / 1.05 var(--f-body); color: var(--iris); white-space: nowrap; }
.ppill:hover, .ppill:focus-visible { transform: translateY(calc(var(--u) * -6)) scale(1.025); }

/* ---------- dónde comprar ---------- */
.p-buy { margin-top: calc(var(--u) * 110); text-align: center; }
.p-buy h2 { margin: 0; font: 400 calc(var(--u) * 110) / 1.15 var(--f-script); color: var(--coral); }
.p-shops { display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 110); margin-top: calc(var(--u) * 20); }
.p-shops a { display: block; transition: transform .45s var(--ease-out); }
.p-shops a:hover, .p-shops a:focus-visible { transform: translateY(calc(var(--u) * -6)) scale(1.04); }
.p-shops img { width: auto; max-width: none; }
.p-shops li:first-child img { height: calc(var(--u) * 130); }
.p-shops li:last-child img { height: calc(var(--u) * 102); }

/* ---------- pie ---------- */
.pfoot { position: relative; margin-top: calc(var(--u) * 100); height: calc(var(--u) * 518); overflow-x: visible; overflow-y: clip; }

/* ---------- movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-r] { opacity: 0; translate: 0 calc(var(--u) * 28); transition: opacity .8s var(--ease-out), translate 1s var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-r].in { opacity: 1; translate: 0 0; }
  .js .p-banner[data-r] { translate: 0 0; clip-path: inset(0 0 100% 0 round calc(var(--u) * 28)); transition: clip-path 1.2s var(--ease-out); }
  .js .p-banner[data-r].in { clip-path: inset(0 0 0 0 round calc(var(--u) * 28)); }
  .p-kit { animation: bob 7s var(--ease-soft) infinite alternate; transform-origin: 50% 90%; }
  .js .p-kit[data-r] { transition: opacity .8s var(--ease-out), translate 1.2s var(--ease-out); }
  @keyframes bob { from { transform: translateY(0) rotate(-.6deg); } to { transform: translateY(calc(var(--u) * -12)) rotate(.6deg); } }
}
@media (prefers-reduced-motion: reduce) { .p-seal { animation: none; } }

@view-transition { navigation: auto; }

/* =========================================================
   MÓVIL
   ========================================================= */
@media (max-width: 800px) {
  .prod-body { padding: 0 var(--m, 20px); margin-top: -12px; }
  .p-banner { width: 100%; height: auto; aspect-ratio: 16 / 10; margin: 0; border-radius: 18px; }
  .pmarquee { left: calc(50% - 50vw); width: 100vw; margin-top: 22px; height: 36px; }
  .pmarquee .marquee-track { font-size: 20px; gap: 18px; }
  .pmarquee .marquee-track img { height: 30px; }

  .p-hero { height: auto; margin-top: 30px; display: grid; gap: 18px; justify-items: center; }
  .p-band { display: none; }
  .p-kit { position: relative; left: auto; top: auto; height: 380px; }
  .p-info { position: relative; left: auto; top: auto; width: 100%; }
  .p-info h1 { font-size: 21px; }
  .p-info .hi, .p-info .para { font-size: 17px; }
  .p-facts {
    position: relative; left: auto; top: auto; width: 100%; flex-direction: column; gap: 18px;
    padding: 22px 20px; border-radius: 22px; background: rgba(194, 191, 228, .26);
  }
  .claims li { font-size: 20px; margin-bottom: 10px; }
  .ing h2 { font-size: 19px; }
  .ing li, .ing .net { font-size: 17px; }
  .ing li::before { width: 14px; height: 14px; }
  .p-seal { position: relative; left: auto; top: auto; width: 130px; height: 130px; margin-top: -4px; }

  .p-gallery { margin: 34px 0 0; width: 100%; height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 12px; }
  .g-video { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 1 / 0.9; border-radius: 22px; }
  .g-tile { aspect-ratio: 1 / 1.2; border-radius: 22px; }
  .g-play { width: 96px; height: 96px; }
  .g-hint { font-size: 14px; bottom: 16px; }

  .p-line { margin-top: 50px; }
  .p-torn { height: 150px; left: calc(50% - 50vw); width: 100vw; }
  .p-torn h2 { font-size: 26px; padding: 0 24px; text-wrap: balance; }
  .p-cards { flex-direction: column; align-items: center; gap: 40px; margin-top: 34px; }
  .pcard { width: 100%; max-width: 340px; }
  .pcard-img img { height: 330px; }
  .pbadge { left: 6px; top: 290px; width: 62px; height: 54px; }
  .pbadge .b2 { left: 5px; top: 4px; width: 53px; height: 45px; }
  .pbadge span { font-size: 28px; }
  .ppill { width: 100%; height: 84px; margin-top: -20px; }
  .ppill span { font-size: 26px; }

  .p-buy { margin-top: 50px; }
  .p-buy h2 { font-size: 64px; }
  .p-shops { gap: 36px; flex-wrap: wrap; }
  .p-shops li:first-child img { height: 84px; }
  .p-shops li:last-child img { height: 66px; }

  .pfoot { height: auto; margin: 60px calc(var(--m, 20px) * -1) 0; overflow: visible; }
}


/* =========================================================
   INGREDIENTES (tarjetas + modal) y CÓMO USAR
   ========================================================= */
.sec-title { margin: 0; text-align: center; font: 600 calc(var(--u) * 44) / 1.15 var(--f-body); letter-spacing: -0.015em; color: var(--iris-deep); }
.sec-title .script { font: 400 calc(var(--u) * 84) / 1 var(--f-script); color: #8181d2; letter-spacing: 0; }

.ing-sec { margin-top: calc(var(--u) * 110); }
.ing-cards { width: calc(var(--u) * 1100); margin: calc(var(--u) * 44) auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 28); }
.ing-card {
  position: relative; width: 100%; display: grid; justify-items: center; gap: calc(var(--u) * 14); cursor: pointer;
  padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 26); border: 0; border-radius: calc(var(--u) * 44);
  background: var(--lavender); color: var(--iris-deep); font: inherit; text-align: center;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.ing-art { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: calc(var(--u) * 32); background: #fffbfa; overflow: hidden; }
.ing-art .art { width: 78%; height: 78%; overflow: visible; }
.ing-name { font: 600 calc(var(--u) * 26) / 1.2 var(--f-body); }
.ing-more { display: inline-flex; gap: calc(var(--u) * 8); font: 600 calc(var(--u) * 17) / 1 var(--f-body); color: var(--iris); transition: color .3s; }
.ing-more span { transition: translate .35s var(--ease-out); }
.ing-card:hover, .ing-card:focus-visible { transform: translateY(calc(var(--u) * -8)); box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 44) rgba(79, 81, 137, .26); }
.ing-card:hover .ing-more, .ing-card:focus-visible .ing-more { color: var(--coral); }
.ing-card:hover .ing-more span { translate: calc(var(--u) * 5) 0; }
.ing-card:active { transform: scale(.98); }

/* movimiento de cada ilustración (también en el modal: se mueven siempre, suave) */
.art .a-back, .art .a-front, .art .a-drop, .art .a-pool, .art .a-petals, .art .a-inner, .art .a-cap, .art .a-spark { transform-box: fill-box; transform-origin: 50% 50%; }
.art-almond .a-back { transform-origin: 50% 100%; transition: rotate .8s var(--ease-out); }
.art-almond .a-front { transform-origin: 50% 100%; transition: rotate .8s var(--ease-out); }
.art-almond .a-drop { opacity: 0; }
.ing-card:hover .a-back, .ing-card:focus-visible .a-back { rotate: -9deg; }
.ing-card:hover .a-front, .ing-card:focus-visible .a-front { rotate: 8deg; }
.ing-card:hover .a-drop, .ing-card:focus-visible .a-drop, .ing-modal[open] .a-drop { animation: drip 2s var(--ease-in-out, ease-in) infinite; }
.ing-card:hover .a-drop.d2, .ing-card:focus-visible .a-drop.d2, .ing-modal[open] .a-drop.d2 { animation-delay: .9s; }
@keyframes drip { 0% { opacity: 0; translate: 0 -14px; scale: .6; } 15% { opacity: 1; scale: 1; } 75% { opacity: 1; translate: 0 128px; } 100% { opacity: 0; translate: 0 140px; scale: .8; } }
.art-almond .a-pool { transition: scale .6s var(--ease-out); }
.ing-card:hover .a-pool { scale: 1.2; }
.art-rose .a-petals { transition: rotate 1.2s var(--ease-out), scale 1.2s var(--ease-out); }
.art-rose .a-inner { transition: rotate 1.2s var(--ease-out), scale 1.2s var(--ease-out); }
.ing-card:hover .a-petals, .ing-card:focus-visible .a-petals { rotate: 36deg; scale: 1.12; }
.ing-card:hover .a-inner, .ing-card:focus-visible .a-inner { rotate: -50deg; scale: 1.1; }
.art-vite .a-cap { transition: rotate .8s var(--ease-out), scale .8s var(--ease-out); }
.ing-card:hover .a-cap, .ing-card:focus-visible .a-cap { rotate: 6deg; scale: 1.1; }
.art-vite .a-spark { opacity: .35; transition: opacity .4s; }
.ing-card:hover .a-spark, .ing-card:focus-visible .a-spark, .ing-modal[open] .a-spark { opacity: 1; animation: twinkle 1.4s ease-in-out infinite; }
.ing-card:hover .s2, .ing-modal[open] .s2 { animation-delay: .45s; } .ing-card:hover .s3, .ing-modal[open] .s3 { animation-delay: .9s; }
@keyframes twinkle { 0%, 100% { scale: .6; rotate: 0deg; } 50% { scale: 1.25; rotate: 30deg; } }
.ing-modal[open] .a-back { animation: sway 3.2s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.ing-modal[open] .a-front { animation: sway 3.2s ease-in-out -1.4s infinite alternate-reverse; transform-origin: 50% 100%; }
@keyframes sway { from { rotate: -7deg; } to { rotate: 7deg; } }
.ing-modal[open] .a-petals { animation: slow-spin 18s linear infinite; }
.ing-modal[open] .a-inner { animation: slow-spin 18s linear infinite reverse; }
@keyframes slow-spin { to { rotate: 360deg; } }
.ing-modal[open] .a-cap { animation: bob2 3s ease-in-out infinite alternate; }
@keyframes bob2 { from { translate: 0 -6px; rotate: -4deg; } to { translate: 0 8px; rotate: 6deg; } }

/* modal */
.ing-modal { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: min(calc(var(--u) * 960), calc(100vw - 32px)); margin: auto; overflow: visible; color: var(--iris-deep); }
.ing-modal::backdrop { background: rgba(79, 81, 137, .45); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s var(--ease-out); }
.ing-modal[open]::backdrop { opacity: 1; }
@starting-style { .ing-modal[open]::backdrop { opacity: 0; } }
.ing-modal-in {
  position: relative; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: calc(var(--u) * 20);
  padding: calc(var(--u) * 14); border-radius: calc(var(--u) * 50); background: var(--lavender);
  box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(40, 42, 90, .4);
  opacity: 0; scale: .92; translate: 0 calc(var(--u) * 24); transition: opacity .3s var(--ease-out), scale .4s var(--ease-out), translate .4s var(--ease-out);
}
.ing-modal[open] .ing-modal-in { opacity: 1; scale: 1; translate: 0 0; }
@starting-style { .ing-modal[open] .ing-modal-in { opacity: 0; scale: .92; translate: 0 24px; } }
.ing-modal-art { display: grid; place-items: center; background: #fffbfa; border-radius: calc(var(--u) * 38); aspect-ratio: 1; }
.ing-modal-art .art { width: 80%; height: 80%; overflow: visible; }
.ing-modal-text { padding: calc(var(--u) * 20) calc(var(--u) * 40) calc(var(--u) * 20) calc(var(--u) * 24); }
.eyebrow-less { margin: 0 0 calc(var(--u) * 12); font: 600 calc(var(--u) * 16) / 1.2 var(--f-body); color: var(--iris); }
.ing-modal h3 { margin: 0 0 calc(var(--u) * 16); font: 600 calc(var(--u) * 46) / 1.1 var(--f-body); letter-spacing: -0.015em; }
.ing-modal-text p:last-child { margin: 0; font: 300 calc(var(--u) * 23) / 1.5 var(--f-body); color: #2f3158; }
.ing-close { position: absolute; right: calc(var(--u) * 22); top: calc(var(--u) * 22); z-index: 2; display: grid; place-items: center; width: calc(var(--u) * 48); height: calc(var(--u) * 48); border: 0; border-radius: 50%; cursor: pointer; background: #fffbfa; color: var(--iris-deep); transition: transform .3s var(--ease-out), background .3s; }
.ing-close svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.ing-close:hover { background: var(--coral); color: #fff; transform: rotate(90deg); }

/* cómo usar */
.how-sec { margin-top: calc(var(--u) * 110); }
.how-intro { margin: calc(var(--u) * 18) 0 0; text-align: center; font: 300 calc(var(--u) * 26) / 1.4 var(--f-body); color: var(--iris-deep); }
.how-steps { width: calc(var(--u) * 1337); margin: calc(var(--u) * 40) 0 0 calc(var(--u) * 53); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 28); }
.how-step { position: relative; padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 30); border-radius: calc(var(--u) * 44); background: var(--lavender); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.how-img { display: block; height: calc(var(--u) * 330); border-radius: calc(var(--u) * 32); overflow: hidden; background: #fffbfa; }
.how-img img { width: 100%; height: 100%; object-fit: contain; transition: scale .9s var(--ease-out); }
.how-img.z1 img { object-fit: cover; scale: 1.3; object-position: 70% 40%; }
.how-img.z2 img { object-fit: cover; scale: 2.2; object-position: 30% 35%; }
.how-img.z3 img { scale: .86; rotate: -5deg; }
.how-num { position: absolute; left: calc(var(--u) * 30); top: calc(var(--u) * 300); width: calc(var(--u) * 78); height: calc(var(--u) * 68); transition: transform .5s var(--ease-out); }
.how-num img { position: absolute; }
.how-num > img:first-child { inset: 0; width: 100%; height: 100%; }
.how-num .b2 { left: calc(var(--u) * 6); top: calc(var(--u) * 5); width: calc(var(--u) * 67); height: calc(var(--u) * 57); }
.how-num b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 calc(var(--u) * 34) / 1 var(--f-body); color: #fff; }
.how-step p { margin: calc(var(--u) * 52) calc(var(--u) * 20) 0; font: 400 calc(var(--u) * 22) / 1.45 var(--f-body); color: #2f3158; }
@media (hover: hover) and (pointer: fine) {
  .how-step:hover { transform: translateY(calc(var(--u) * -6)); box-shadow: 0 calc(var(--u) * 22) calc(var(--u) * 40) rgba(79, 81, 137, .22); }
  .how-step:hover .how-img img { scale: 1.06; }
  .how-step:hover .how-num { transform: rotate(-8deg) scale(1.1); }
}
.when { width: calc(var(--u) * 1100); margin: calc(var(--u) * 44) auto 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(var(--u) * 44); padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 14); border-radius: calc(var(--u) * 50); background: #f7d9d3; }
.when-seal { width: calc(var(--u) * 170); height: calc(var(--u) * 170); border-radius: 50%; margin: calc(var(--u) * 20) 0 calc(var(--u) * 20) calc(var(--u) * 40); animation: spin 38s linear infinite; }
.when h3 { margin: 0 0 calc(var(--u) * 10); font: 600 calc(var(--u) * 34) / 1.15 var(--f-body); color: var(--iris-deep); }
.when p { margin: 0; padding-right: calc(var(--u) * 40); font: 300 calc(var(--u) * 22) / 1.5 var(--f-body); color: #3a3a56; }
@media (prefers-reduced-motion: reduce) { .when-seal { animation: none; } .ing-modal[open] .art * { animation: none !important; } }

@media (max-width: 800px) {
  .sec-title { font-size: 28px; } .sec-title .script { font-size: 52px; }
  .ing-sec, .how-sec { margin-top: 56px; }
  .ing-cards { width: 100%; margin-top: 26px; grid-template-columns: 1fr; gap: 14px; }
  .ing-card { grid-template-columns: 96px 1fr; justify-items: start; align-items: center; padding: 10px 18px 10px 10px; border-radius: 28px; text-align: left; gap: 4px 16px; }
  .ing-art { grid-row: span 2; width: 96px; border-radius: 20px; }
  .ing-name { font-size: 20px; align-self: end; } .ing-more { font-size: 15px; align-self: start; }
  .ing-modal { width: calc(100vw - 24px); }
  .ing-modal-in { grid-template-columns: 1fr; border-radius: 28px; padding: 10px; }
  .ing-modal-art { aspect-ratio: 1.3; border-radius: 22px; } .ing-modal-art .art { height: 88%; }
  .ing-modal-text { padding: 12px 14px 18px; } .ing-modal h3 { font-size: 30px; } .ing-modal-text p:last-child { font-size: 17px; }
  .ing-close { width: 42px; height: 42px; right: 18px; top: 18px; } .ing-close svg { width: 19px; height: 19px; }
  .how-intro { font-size: 18px; padding: 0 12px; }
  .how-steps { width: 100%; margin: 24px 0 0; grid-template-columns: 1fr; gap: 14px; }
  .how-step { border-radius: 28px; padding: 10px 10px 22px; } .how-img { height: 230px; border-radius: 20px; }
  .how-num { left: 22px; top: 200px; width: 58px; height: 50px; } .how-num .b2 { left: 4px; top: 4px; width: 50px; height: 42px; } .how-num b { font-size: 26px; }
  .how-step p { margin: 34px 14px 0; font-size: 17px; }
  .when { width: 100%; grid-template-columns: 1fr; justify-items: center; text-align: center; border-radius: 28px; gap: 0; padding: 10px 10px 24px; }
  .when-seal { width: 110px; height: 110px; margin: 22px 0 12px; } .when h3 { font-size: 24px; } .when p { font-size: 17px; padding: 0 12px; }
}