/* VICENTÍN 2026 · páginas interiores */

.h2--md { font-size: clamp(38px, 4.6vw, 72px); }

/* ------- cabecera de página ------- */
.ihero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.ihero__media, .ihero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ihero__media img { object-fit: cover; object-position: var(--pos, 50% 50%); animation: heroIn 2600ms var(--ease-out) 100ms both; transform: scale(1.06); }
.ihero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,9,.8) 0%, rgba(10,10,9,.45) 14%, rgba(10,10,9,0) 34%), linear-gradient(0deg, rgba(10,10,9,.97) 0%, rgba(10,10,9,.68) 34%, rgba(10,10,9,0) 68%), linear-gradient(90deg, rgba(10,10,9,.62) 0%, rgba(10,10,9,0) 62%); }
.ihero__content { position: relative; z-index: 1; width: var(--wrap); margin: 0 auto; padding: 200px 0 clamp(56px, 9vh, 104px); }
.ihero__title { font-family: var(--display); font-weight: 700; font-size: clamp(52px, min(8.6vw, 15vh), 136px); line-height: .94; letter-spacing: -.012em; margin: 0 0 26px; max-width: 14ch; text-wrap: balance; }
.ihero__lede { max-width: 50ch; margin: 0; color: var(--muted); font-size: clamp(18px, 1.1vw + 11px, 22px); line-height: 1.5; }

.ihero__cap { position: absolute; right: clamp(20px, 4vw, 56px); bottom: 22px; z-index: 1; margin: 0; font-size: 13px; color: rgba(10,10,9,.62); }
/* foto antigua sobre papel claro: cabecera sólida, texto oscuro y velo del color del papel */
.ihero--paper { background: #f0ede7; }
.ihero--paper .ihero__veil { background: linear-gradient(90deg, rgba(240,237,231,.94) 0%, rgba(240,237,231,.82) 40%, rgba(240,237,231,0) 58%); }

/* ------- frase grande ------- */
.istate { padding: var(--section) 0; }
.istate__big { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 4.4vw, 68px); line-height: 1.12; max-width: 24ch; margin: 0 0 40px; text-wrap: balance; }
.istate__sub { max-width: 54ch; margin: 0 0 0 auto; color: var(--muted); }

/* ------- foto y texto ------- */
.isplit { padding: var(--section) 0; }
.isplit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.isplit--rev .isplit__media { order: 2; }
.isplit__media { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: var(--ratio, auto); }
.isplit__media img { width: 100%; height: 100%; object-fit: cover; }
.isplit__media--plain { border-radius: 0; overflow: visible; aspect-ratio: auto; display: grid; place-items: center; }
.isplit__media--plain img { width: auto; max-width: min(100%, 520px); max-height: 74vh; height: auto; object-fit: contain; }
.isplit__text p:not(.eyebrow) { color: var(--muted); max-width: 54ch; }

/* Foto a sangre por un lado, como «En la alta cocina» de la portada */
.isplit--bleed { --out: calc((100vw - min(1240px, 100vw - 2 * var(--gutter))) / 2); overflow-x: clip; }
.isplit--bleed .isplit__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 100px); }
.isplit--bleed.isplit--rev .isplit__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.isplit--bleed .isplit__media { position: relative; margin-left: calc(-1 * var(--out)); border-radius: 0 var(--radius) var(--radius) 0; max-height: 80vh; }
.isplit--bleed.isplit--rev .isplit__media { margin-left: 0; margin-right: calc(-1 * var(--out)); border-radius: var(--radius) 0 0 var(--radius); }
.isplit--bleed .isplit__media img { position: absolute; inset: 0; }

/* ------- foto a todo el ancho ------- */
.iband { position: relative; overflow: hidden; display: grid; place-items: center; }
.iband img { width: 100%; height: clamp(320px, 62vw, 860px); object-fit: cover; }
.iband--title::after { content: ""; position: absolute; inset: 0; background: rgba(10,10,9,.28); }
.iband__title { position: absolute; z-index: 1; margin: 0; padding: 0 var(--gutter); text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(46px, 9vw, 150px); line-height: .96; color: #f3efe2; }

/* ------- siguiente página ------- */
.inext { padding: clamp(64px, 8vw, 112px) 0; }
.inext__grid { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.inext__link { display: block; text-decoration: none; color: inherit; }
.inext__link .eyebrow { display: flex; margin-bottom: 12px; }
.inext__title { font-family: var(--display); font-size: clamp(38px, 5.4vw, 84px); line-height: 1; transition: opacity var(--dur-2) var(--ease-out); }
.inext__link:hover .inext__title { opacity: .68; }

/* ------- dónde comprar ------- */
.stores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.store { padding: clamp(28px, 3.4vw, 48px); border-radius: var(--radius); background: rgba(255,255,255,.5); display: flex; flex-direction: column; align-items: flex-start; }
.store--own { background: var(--ink); color: #f3efe2; --muted: rgba(243,239,226,.7); }
.store__kicker { margin: 0 0 14px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.store--own .store__kicker { color: var(--brand); }
.store__name { margin: 0 0 14px; font-family: var(--display); font-size: clamp(28px, 2.8vw, 42px); line-height: 1.05; color: inherit; }
.store p:not(.store__kicker) { color: var(--muted); margin-bottom: 24px; }
.store__link { margin-top: auto; font-weight: 700; color: inherit; text-underline-offset: 4px; }
.store .btn { margin-top: auto; }
.store--own .btn--gold { background: var(--brand); color: var(--ink); }

/* ------- textos de compra y legales ------- */
.doc { padding: 150px 0 var(--section); min-height: 70vh; }
.doc__head { max-width: 900px; margin-bottom: clamp(40px, 6vw, 80px); }
.doc__head .h2 { margin-bottom: 0; font-size: clamp(42px, 5.6vw, 84px); }
.doc__grid--toc { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.doc__toc { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.35; max-height: calc(100vh - 120px); overflow-y: auto; }
.doc__toc a { text-decoration: none; color: var(--muted); transition: color var(--dur-1) var(--ease-out); }
.doc__toc a:hover { color: var(--ink); }
.doc__body { max-width: 68ch; }
.doc__body h2, .doc__body h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 1.8em 0 .55em; scroll-margin-top: 96px; }
.doc__body h2 { font-size: clamp(28px, 2.8vw, 40px); }
.doc__body h3 { font-size: clamp(24px, 2.2vw, 32px); }
.doc__body > :first-child { margin-top: 0; }
.doc__body p, .doc__body li { color: rgba(10,10,9,.82); }
.doc__body a { color: var(--ink); text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc__body ul, .doc__body ol { padding-left: 1.2em; margin: 0 0 1.1em; }

/* ------- contacto ------- */
.contact { padding: 160px 0 var(--section); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 130px); align-items: start; }
.contact__data { font-style: normal; margin-top: 8px; }
.contact__data p { color: var(--muted); }
.contact__data strong { color: var(--ink); }
.contact__data a { color: var(--ink); text-decoration: none; }
.contact__data a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact__form { padding: clamp(24px, 3.4vw, 48px); border-radius: var(--radius); background: rgba(255,255,255,.55); }
.contact__hp { position: absolute; left: -9999px; }
.contact__msg { padding: 14px 18px; border-radius: 16px; background: var(--brand); color: var(--ink); font-weight: 700; }
.contact__msg--error { background: #7a1f1a; color: #fff; }
.contact__legal { margin: 22px 0 0; font-size: 13px; line-height: 1.45; color: var(--faint); }
.field { display: block; margin-bottom: 20px; }
.field span { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 700; }
.field input, .field textarea { width: 100%; padding: 14px 16px; border: 0; border-radius: 14px; background: #fff; color: var(--ink); font: inherit; font-size: 17px; box-shadow: inset 0 0 0 1px var(--hair-strong); }
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 26px; font-size: 15px; line-height: 1.4; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); }
.contact button.btn { border: 0; cursor: pointer; font-family: inherit; }

/* ------- 404 ------- */
.notfound { padding: 190px 0 var(--section); min-height: 72vh; }
.notfound p:not(.eyebrow) { color: var(--muted); margin-bottom: 32px; }

@media (max-width: 900px) {
  .isplit__grid, .contact__grid, .doc__grid--toc { grid-template-columns: 1fr; }
  .isplit--rev .isplit__media { order: 0; }
  .isplit--bleed .isplit__grid, .isplit--bleed.isplit--rev .isplit__grid { grid-template-columns: 1fr; }
  .isplit--bleed .isplit__media, .isplit--bleed.isplit--rev .isplit__media { margin-inline: calc(-1 * var(--out)); border-radius: 0; }
  .istate__sub { margin-left: 0; }
  .doc__toc { position: static; max-height: none; display: none; }
  .stores { grid-template-columns: 1fr; }
  .doc { padding-top: 112px; }
  .contact { padding-top: 112px; }
}
@media (max-width: 700px), (max-aspect-ratio: 1/1) {
  .ihero__media img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .ihero--paper .ihero__veil { background: linear-gradient(0deg, #f2efe9 0%, #f2efe9 50%, rgba(242,239,233,.8) 55%, rgba(242,239,233,0) 64%); }
  .ihero__cap { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ihero__media img { transform: none; } }
.doc__body, .doc__body h2, .doc__body h3, .doc__body p, .doc__body li { overflow-wrap: anywhere; }
.doc__grid--toc > * { min-width: 0; }