/* ===========================================================
   CAPRICHITO PERÚ · Sistema de diseño v2.2 "Premium minimal"
   -----------------------------------------------------------
   Principios: aire, restricción, tipografía editorial.
   Menos cajas, más espacio. Un acento terracota casi invisible.
   =========================================================== */

:root {
  --paper:   #F7F4EE;   /* papel cálido */
  --paper-2: #F1EBE1;   /* tinte apenas perceptible */
  --card:    #FCFAF5;
  --ink:     #262119;   /* espresso — texto */
  --ink-2:   #736A5E;
  --mut:     #B0A695;
  --line:    color-mix(in srgb, var(--ink) 8%, transparent);
  --line-2:  color-mix(in srgb, var(--ink) 14%, transparent);

  --accent:    #B0532E;   /* terracota, con cuentagotas */
  --accent-d:  #8F3F20;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-hero: clamp(3.4rem, 13vw, 6.5rem);
  --t-h2:   clamp(2rem, 5.6vw, 3.2rem);
  --t-h3:   clamp(1.15rem, 2.6vw, 1.4rem);
  --t-lead: clamp(1.1rem, 2.3vw, 1.35rem);
  --t-body: 1.0625rem;
  --t-sm:   0.85rem;
  --t-xs:   0.7rem;

  --s1:8px; --s2:14px; --s3:20px; --s4:28px; --s5:40px; --s6:56px;
  --max: 1140px;
  --gutter: clamp(22px, 6vw, 68px);
  --r: 16px;
  --ease: cubic-bezier(.22,.7,.24,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:var(--sans); background:var(--paper); color:var(--ink);
  font-size:var(--t-body); line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--accent); color:#fff; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.wrap { width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.measure { max-width:42ch; }
.eyebrow { font-size:var(--t-xs); font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); }

h1,h2,h3 { font-family:var(--serif); font-weight:400; line-height:1.05; letter-spacing:-.015em; }
h2 { font-size:var(--t-h2); font-weight:400; }
h3 { font-size:var(--t-h3); line-height:1.2; }

/* Botón */
.btn {
  --pv:16px; --ph:34px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--pv) var(--ph);
  font-family:var(--sans); font-weight:600; font-size:1rem; letter-spacing:-.01em;
  background:var(--accent); color:#fff; border:none; border-radius:999px; cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background:var(--accent-d); transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn--lg { --pv:18px; --ph:44px; font-size:1.05rem; }
.btn--block { width:100%; }

/* Anuncio — hilo fino, discreto */
.announce {
  background:transparent; color:var(--ink-2);
  font-size:var(--t-xs); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  text-align:center; padding:14px var(--gutter); border-bottom:1px solid var(--line);
}
.announce b { color:var(--ink); font-weight:600; }
.announce .sep { color:var(--accent); padding:0 12px; }

.masthead { display:flex; align-items:center; justify-content:space-between; padding:26px var(--gutter); }
.masthead .brand { font-family:var(--serif); font-weight:400; font-size:1.4rem; letter-spacing:-.02em; }
.masthead .brand b { color:var(--accent); font-weight:400; }
.masthead .m-link { font-size:var(--t-sm); font-weight:600; color:var(--ink-2); letter-spacing:.02em; }
.masthead .m-link:hover { color:var(--accent); }

/* Barra de compra flotante */
.buybar {
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px var(--gutter);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(18px); -webkit-backdrop-filter:saturate(1.4) blur(18px);
  border-bottom:1px solid var(--line);
  transform:translateY(-102%); transition:transform .45s var(--ease);
}
.buybar.show { transform:none; }
.buybar__l { display:flex; align-items:baseline; gap:12px; min-width:0; }
.buybar__name { font-family:var(--serif); font-weight:400; }
.buybar__price { color:var(--mut); font-size:var(--t-sm); }
.buybar .btn { --pv:10px; --ph:24px; font-size:.95rem; }
@media (max-width:520px){ .buybar__name{ display:none; } }

/* WhatsApp flotante — discreto */
.wa {
  position:fixed; right:20px; bottom:22px; z-index:55;
  display:flex; align-items:center; height:56px;
  background:#25D366; color:#fff; border:none; text-decoration:none;
  border-radius:999px; overflow:hidden; white-space:nowrap;
  box-shadow:0 6px 18px color-mix(in srgb, #128C4A 32%, transparent);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa svg { width:26px; height:26px; fill:#fff; flex:none; margin:0 15px; }
.wa span {
  font-size:var(--t-sm); font-weight:600;
  max-width:0; opacity:0; overflow:hidden;
  transition:max-width .38s var(--ease), opacity .28s var(--ease), padding-right .38s var(--ease);
}
.wa:hover { transform:translateY(-2px); box-shadow:0 10px 26px color-mix(in srgb, #128C4A 42%, transparent); }
@media (hover:hover){
  .wa:hover span { max-width:160px; opacity:1; padding-right:20px; }
  .wa:hover svg { margin-right:12px; }
}

/* Secciones — mucho aire, casi sin cambios de fondo */
.section { padding:var(--s6) 0; }
.section--2 { background:var(--paper-2); }
.section + .section { border-top:1px solid var(--line); }
.section__head { margin-bottom:var(--s4); max-width:34ch; }
.section__head .eyebrow { display:block; margin-bottom:10px; }
.section__head p { color:var(--ink-2); margin-top:10px; font-size:var(--t-lead); }

/* HERO */
.hero { padding:var(--s4) 0 var(--s6); }
.hero__grid { display:grid; gap:var(--s5); align-items:center; }
.hero h1 { font-size:var(--t-hero); font-weight:300; letter-spacing:-.03em; line-height:.98; }
.hero h1 .accent { color:var(--accent); font-style:italic; }
.hero__tag { font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.4rem,4vw,2rem); margin-top:8px; color:var(--ink-2); }
.hero__pitch { font-size:1rem; color:var(--ink-2); margin-top:var(--s3); max-width:40ch; line-height:1.55; }
.hero__pitch b { color:var(--ink); font-weight:600; }
.hero__cta { margin-top:var(--s3); display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.hero__price { display:flex; align-items:baseline; gap:8px; }
.hero__price .amt { font-family:var(--serif); font-size:2rem; font-weight:400; }
.hero__price .cap { font-size:var(--t-sm); color:var(--mut); }
.hero__meta { margin-top:var(--s3); font-size:var(--t-sm); color:var(--ink-2); letter-spacing:.01em; }
.hero__meta a { color:var(--accent); font-weight:600; border-bottom:1px solid color-mix(in srgb,var(--accent) 30%, transparent); }

/* Galería integrada — premium, navegable */
.shots { display:grid; gap:12px; }
.shots__main { aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; background:var(--paper-2); position:relative; cursor:pointer; }
.shots__layer { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s var(--ease), transform 1.4s var(--ease); }
.shots__layer.is-on { opacity:1; }
@media (hover:hover){ .shots__main:hover .shots__layer.is-on { transform:scale(1.045); } }
.shots__zoom {
  position:absolute; left:14px; bottom:14px; z-index:3;
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px 9px 12px; border:0; border-radius:999px;
  background:color-mix(in srgb, var(--ink) 58%, transparent); color:#fff;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  font-family:var(--sans); font-weight:600; font-size:var(--t-sm); line-height:1; cursor:pointer;
  opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.shots__zoom svg { width:16px; height:16px; }
@media (hover:hover){ .shots__main:hover .shots__zoom { opacity:1; transform:none; } }
@media (hover:none), (max-width:700px){ .shots__zoom { opacity:1; transform:none; } }

.shots__row { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.shots__t { aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--paper-2); position:relative; padding:0; border:0; cursor:pointer; }
.shots__t img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.66; transition:transform .5s var(--ease), opacity .35s var(--ease); }
.shots__t::after { content:""; position:absolute; inset:0; border-radius:12px; box-shadow:inset 0 0 0 0 var(--accent); transition:box-shadow .3s var(--ease); pointer-events:none; }
.shots__t.is-active img { opacity:1; }
.shots__t.is-active::after { box-shadow:inset 0 0 0 2.5px var(--accent); }
@media (hover:hover){ .shots__t:hover img { transform:scale(1.08); opacity:1; } }
@media (min-width:880px){ .hero__grid{ grid-template-columns:1.05fr .95fr; } }

/* APPS — minimal, sin bordes, mucho aire */
.appgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4) var(--s3); max-width:640px; }
@media (min-width:620px){ .appgrid{ grid-template-columns:repeat(8,1fr); } }
.app { display:grid; justify-items:center; gap:12px; }
.app__ico { position:relative; overflow:hidden; width:100%; max-width:56px; aspect-ratio:1; border-radius:26%; display:grid; place-content:center; background:var(--card); box-shadow:0 2px 6px color-mix(in srgb,var(--ink) 8%, transparent); }
.app__ico .mono { font-family:var(--serif); font-weight:400; font-size:1.1rem; color:var(--ink); }
.app__ico:has(img) .mono { display:none; }
.app__ico img { position:absolute; inset:0; width:100%; height:100%; padding:22%; object-fit:contain; box-sizing:border-box; }
/* Fondos de color como en el celular (glifos blancos, Gmail va sobre blanco) */
.ico-yape { background:#7A3FF2; } .ico-yape .mono { color:#fff; }
/* icono completo de Yape: zoom para recortar el margen blanco del PNG y llenar el cuadro */
.ico-yape img { inset:0; width:100%; height:100%; padding:0; object-fit:cover; }
.ico-ig { background:radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 62%, #285AEB 92%); }
.ico-tt { background:#111; } .ico-tt .mono { color:#fff; }
.ico-wsp { background:#25D366; }
.ico-sp { background:#1DB954; }
.ico-yt { background:#FF0000; }
.ico-fb { background:#1877F2; }
.ico-gmail { background:#fff; }
.app__n { font-size:var(--t-xs); color:var(--mut); font-weight:500; letter-spacing:.02em; }

/* USOS — grid compacto */
.uses2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); }
@media (min-width:720px){ .uses2{ grid-template-columns:repeat(3,1fr); } }
.u2 { padding:var(--s3); background:var(--card); border-radius:var(--r); }
.u2__ic { width:36px; height:36px; border-radius:10px; background:var(--paper-2); display:grid; place-content:center; margin-bottom:14px; }
.u2__ic svg { width:19px; height:19px; stroke:var(--accent); fill:none; stroke-width:1.5; }
.u2 h3 { font-size:1.05rem; margin-bottom:4px; }
.u2 p { font-size:var(--t-sm); color:var(--ink-2); line-height:1.45; }

/* VIDEO — vertical (9/16), centrado */
.video { border-radius:var(--r); overflow:hidden; aspect-ratio:9/16; max-width:330px; margin-inline:auto; background:var(--paper-2); display:grid; place-content:center; position:relative; }
.video .play { width:64px; height:64px; border-radius:50%; background:var(--accent); display:grid; place-content:center; }
.video .play svg { width:24px; height:24px; fill:#fff; margin-left:4px; }
.video .cap { position:absolute; bottom:16px; left:16px; font-size:var(--t-sm); color:var(--ink-2); }
.video video, .video img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Detalles — tabla compacta con "ver más" */
.detalles { margin-top:0; }
.specs-wrap { position:relative; max-height:96px; overflow:hidden; transition:max-height .45s var(--ease); }
.specs-wrap.open { max-height:600px; }
.specs-wrap:not(.open)::after { content:""; position:absolute; left:0; right:0; bottom:0; height:64px; background:linear-gradient(transparent, var(--paper-2)); pointer-events:none; }
.specs2 { display:grid; grid-template-columns:1fr; border-top:1px solid var(--line-2); }
@media (min-width:640px){ .specs2{ grid-template-columns:1fr 1fr; column-gap:var(--s5); } }
.specs2 div { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:var(--t-sm); }
.specs2 strong { font-weight:600; }
.specs2 span { color:var(--ink-2); text-align:right; }
.vermas { margin-top:var(--s2); background:none; border:none; padding:0; font:inherit; font-weight:600; color:var(--accent); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.vermas span { font-size:1.2rem; line-height:1; }

/* FICHA TÉCNICA */
.spectable { border-top:1px solid var(--line-2); max-width:660px; }
.spectable div { display:flex; justify-content:space-between; gap:24px; padding:17px 0; border-bottom:1px solid var(--line); }
.spectable strong { font-weight:600; }
.spectable span { color:var(--ink-2); text-align:right; }

/* RESEÑAS */
/* Carrusel horizontal con sombra y flotación */
.deliv { display:flex; gap:var(--s3); overflow-x:auto; scroll-snap-type:x mandatory; padding:26px 6px 34px; margin-bottom:var(--s3); -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.deliv::-webkit-scrollbar { display:none; }
.deliv__i { flex:0 0 62%; max-width:250px; scroll-snap-align:center; aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:var(--paper-2); display:grid; place-content:center; position:relative; box-shadow:0 14px 30px color-mix(in srgb,var(--ink) 15%, transparent); animation:float 6s var(--ease) infinite; will-change:transform; }
.deliv__i:nth-child(2){ animation-delay:1.2s; }
.deliv__i:nth-child(3){ animation-delay:2.4s; }
.deliv__i svg { width:22px; height:22px; stroke:var(--mut); fill:none; stroke-width:1.3; }
.deliv__i img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@keyframes float { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
@media (min-width:640px){ .deliv{ justify-content:center; } .deliv__i{ flex-basis:230px; } }
.swipe-hint { text-align:center; font-size:var(--t-xs); color:var(--mut); letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--s4); }
.quote { max-width:600px; margin:0 auto; text-align:center; }
.quote p { font-family:var(--serif); font-weight:300; font-size:1.5rem; line-height:1.3; letter-spacing:-.01em; }
.quote footer { margin-top:12px; font-size:var(--t-sm); color:var(--mut); font-weight:600; letter-spacing:.04em; }
.quote .st { color:var(--accent); font-size:.85rem; letter-spacing:3px; margin-bottom:10px; }

/* PEDIDO */
.orderbox { max-width:520px; }
.form { display:grid; gap:var(--s2); }
.form[hidden] { display:none; }
.field { display:grid; gap:5px; }
.field label { font-size:var(--t-sm); font-weight:600; color:var(--ink-2); }
.field input { font:inherit; font-size:1.05rem; padding:10px 0; border:none; border-bottom:1px solid var(--line-2); background:transparent; transition:border-color .25s; }
.field input::placeholder { color:var(--mut); }
.field input:focus { outline:none; border-bottom-color:var(--accent); }
.field input.error { border-bottom-color:var(--accent); }
.pay { border:none; display:grid; gap:0; margin-top:var(--s2); border-top:1px solid var(--line); }
.pay legend { font-size:var(--t-sm); font-weight:600; color:var(--ink-2); padding-top:var(--s2); margin-bottom:2px; }
.pay label { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.pay input { accent-color:var(--accent); width:19px; height:19px; }
.pay .l strong { display:block; font-weight:600; }
.pay .l small { color:var(--mut); font-size:var(--t-sm); }
.pay label:has(input:checked) .l strong { color:var(--accent); }
.form .btn { margin-top:var(--s2); }
.form__note { font-size:var(--t-sm); color:var(--mut); text-align:center; }
.order-done { text-align:center; padding:var(--s2) 4px; animation:doneIn .5s var(--ease) both; }
.order-done__ic { width:56px; height:56px; margin:0 auto var(--s2); border-radius:50%; display:grid; place-content:center; background:color-mix(in srgb, #25D366 15%, transparent); color:#128C4A; font-size:1.7rem; font-weight:700; }
.order-done h3 { font-family:var(--serif); font-weight:400; font-size:1.5rem; margin-bottom:8px; }
.order-done > p { color:var(--ink-2); font-size:var(--t-sm); max-width:38ch; margin:0 auto; }
.order-done .btn { margin-top:var(--s3); }
@keyframes doneIn { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.trustline { margin-top:var(--s3); display:grid; gap:8px; padding-top:var(--s3); border-top:1px solid var(--line); }
.trustline div { display:flex; gap:12px; align-items:baseline; font-size:var(--t-sm); color:var(--ink-2); }
.trustline b { color:var(--ink); font-weight:600; }
.trustline .mk { color:var(--accent); font-weight:700; flex:none; }
.trustline .warn { color:var(--accent); font-weight:600; font-size:var(--t-xs); }

/* FAQ — tarjeta */
.faq-list { background:var(--card); border-radius:var(--r); padding:4px var(--s3); box-shadow:0 2px 12px color-mix(in srgb,var(--ink) 5%, transparent); }
.faq details { border-bottom:1px solid var(--line); }
.faq details:last-child { border-bottom:none; }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:16px 0; font-family:var(--serif); font-weight:400; font-size:1.1rem; transition:color .2s; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--accent); }
.faq summary::after { content:"+"; color:var(--accent); font-size:1.4rem; font-family:var(--sans); flex:none; transition:transform .25s var(--ease); }
.faq details[open] summary::after { content:"–"; }
.faq details p { padding-bottom:16px; color:var(--ink-2); max-width:62ch; line-height:1.5; }

/* FOOTER — claro, centrado, refinado */
.footer { background:var(--paper-2); color:var(--ink-2); padding:var(--s6) 0 calc(var(--s5) + 60px); text-align:center; border-top:1px solid var(--line); }
.footer .fb { font-family:var(--serif); font-size:2rem; font-weight:300; color:var(--ink); margin-bottom:14px; letter-spacing:-.02em; }
.footer .fb b { color:var(--accent); font-weight:300; }
.footer p { margin-bottom:8px; font-size:var(--t-sm); }
.footer p strong, .footer p b { color:var(--ink); font-weight:600; }
.footer a { color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:2px; }
.footer a:hover { color:var(--accent); }
.footer .foot-legal { margin-top:var(--s3); }
.footer .foot-legal a { display:inline-block; border:1px solid var(--line-2); border-radius:8px; padding:8px 16px; font-size:var(--t-sm); font-weight:600; color:var(--ink); }
.footer .foot-legal a:hover { border-color:var(--accent); color:var(--accent); }
.footer .tiny { font-size:var(--t-xs); color:var(--mut); margin-top:18px; padding-top:var(--s3); border-top:1px solid var(--line); display:inline-block; }

/* LIGHTBOX — agrandar fotos */
.lightbox { position:fixed; inset:0; z-index:100; background:color-mix(in srgb, var(--ink) 93%, #000); display:none; align-items:center; justify-content:center; padding:20px; }
.lightbox.show { display:flex; }
.lightbox__stage { display:flex; align-items:center; justify-content:center; max-width:min(92vw,760px); max-height:88vh; }
.lightbox img { max-width:100%; max-height:88vh; border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.5); user-select:none; -webkit-user-select:none; }
.lightbox__close { position:absolute; top:12px; right:20px; background:none; border:none; color:#fff; font-size:2.6rem; line-height:1; cursor:pointer; opacity:.85; z-index:2; }
.lightbox__close:hover { opacity:1; }
.lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:0; background:rgba(255,255,255,.13); color:#fff; font-size:2rem; line-height:1; cursor:pointer; display:grid; place-content:center; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background .25s var(--ease); }
.lightbox__nav:hover { background:rgba(255,255,255,.26); }
.lightbox__prev { left:16px; }
.lightbox__next { right:16px; }
.lightbox__count { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.85); font-family:var(--sans); font-weight:600; font-size:var(--t-sm); letter-spacing:.06em; }
@media (max-width:520px){ .lightbox__nav{ width:44px; height:44px; font-size:1.6rem; } .lightbox__prev{ left:8px; } .lightbox__next{ right:8px; } }

/* MOTION */
.js [data-reveal] { opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].in { opacity:1; transform:none; }
.js [data-reveal][data-delay="1"] { transition-delay:.1s; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js [data-reveal]{ opacity:1; transform:none; transition:none; }
  .deliv__i{ animation:none; }
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}