/* Life Isn't Pink — shared styles for every page. */
:root {
  --ink: #161314; --ink2: #221d1f; --cream: #f5efe6; --paper: #faf6f0;
  --pink: #e8609a; --pink-deep: #b92d68; --pink-soft: #fbe4ee;
  --text: #2b2426; --muted: #6e6466; --line: #e6ddd2;
  --serif: "Playfair Display", Georgia, serif; --sans: "Montserrat", system-ui, sans-serif; --script: "Caveat Brush", cursive;
}
/* Bilingual copy: every string has a lang="es" and lang="en" twin; the inactive one is hidden. */
html[lang=es] [lang=en], html[lang=en] [lang=es] { display: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; font: 400 17px/1.65 var(--sans); color: var(--text); background: var(--paper); accent-color: var(--pink); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
section { padding: clamp(64px, 10vw, 120px) 0; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
p { margin: 0 0 1em; }
.dark { background: var(--ink); color: var(--cream); }
.script { font-family: var(--script); color: var(--pink); font-weight: 400; }
.hl { background: linear-gradient(transparent 62%, rgba(232, 96, 154, .45) 62% 90%, transparent 90%); padding: 0 .08em; }
.eyebrow { font: 600 .78rem/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; margin-bottom: 1.2em; }
.muted { color: var(--muted); }
.btn {
  display: inline-flex; align-items: center; gap: .5em; padding: .95em 1.6em; border-radius: 999px;
  font: 600 .95rem var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 2px solid var(--pink); background: var(--pink); color: var(--ink); transition: transform .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(22, 19, 20, .94); backdrop-filter: blur(8px); color: var(--cream); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.logo { font: 800 1.3rem var(--serif); text-decoration: none; white-space: nowrap; }
.logo .script { font-size: 1.45em; }
.nav-bar { display: flex; align-items: center; gap: 1.2rem; }
.nav-link { text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap; }
.nav-link:hover { color: var(--pink); }
.nav-bar .btn { padding: .55em 1.1em; font-size: .85rem; }
.menu-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1.5px solid var(--cream); border-radius: 50%; background: none; color: inherit; font-size: 1.05rem; cursor: pointer; }
.menu-btn:hover { border-color: var(--pink); color: var(--pink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Hamburger panel: everything except "Escúchanos" and "Comparte tu historia" lives here, on every screen size. */
.menu-panel { position: absolute; top: 64px; right: max(20px, calc((100% - 1120px) / 2)); width: 270px; display: flex; flex-direction: column; padding: 6px 22px 20px; background: var(--ink); border: 1px solid #332b2e; border-top: 0; border-radius: 0 0 16px 16px; box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
.menu-panel a, .menu-panel button:not(.lang-btn) { display: block; width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid #2c2527; background: none; color: inherit; text-align: left; text-decoration: none; font: 500 1rem var(--sans); cursor: pointer; }
.menu-panel a:hover, .menu-panel button:hover { color: var(--pink); }
.lang-btn { align-self: flex-start; margin-top: 16px; border: 1.5px solid var(--cream); background: none; color: inherit; border-radius: 999px; padding: .45em 1em; font: 600 .82rem var(--sans); letter-spacing: .04em; cursor: pointer; }
.lang-btn:hover { border-color: var(--pink); color: var(--pink); }
@media (max-width: 760px) {
  .menu-panel { left: 0; right: 0; width: auto; border-radius: 0; border-left: 0; border-right: 0; padding: 6px 20px 22px; }
  .nav { gap: 8px; }
  .logo { font-size: 1rem; }
  .nav-bar { gap: 10px; }
  .nav-link { font-size: .82rem; }
  .nav-bar .btn { padding: .5em .85em; font-size: .8rem; }
}
@media (max-width: 420px) {
  .nav { gap: 6px; }
  .logo { font-size: .9rem; }
  .nav-bar { gap: 8px; }
  .nav-link { font-size: .76rem; }
  .nav-bar .btn { padding: .4em .8em; font-size: .74rem; white-space: normal; max-width: 8.6em; line-height: 1.15; text-align: center; } /* "Comparte tu / historia" on two lines */
  .menu-btn { width: 34px; height: 34px; font-size: .95rem; }
}

/* Hero: torn pink paper peeking out behind the cover art */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 100px) 0; }
.hero-art { position: relative; }
@media (max-width: 860px) { .hero-art { margin-top: 28px; } } /* the pink corner reaches 32px above the picture */
.hero-art::before, .hero-art::after { content: ""; position: absolute; z-index: -1; top: -32px; left: -36px; width: 58%; height: 52%; }
.hero-art::before { background: var(--cream); clip-path: polygon(0 0, 100% 0, 93% 9%, 97% 18%, 84% 31%, 88% 42%, 71% 55%, 75% 66%, 54% 80%, 49% 91%, 30% 100%, 0 100%); }
.hero-art::after { background: var(--pink); clip-path: polygon(0 0, 97% 0, 90% 9%, 94% 17%, 81% 30%, 85% 41%, 68% 54%, 72% 64%, 51% 78%, 46% 89%, 27% 98%, 0 99%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(3.4rem, 9vw, 6.4rem); font-weight: 800; color: var(--cream); margin-bottom: .25em; }
.hero h1 .script { font-size: 1.2em; display: inline-block; transform: rotate(-6deg); }
.hero .eyebrow { margin-top: 1em; }
.lead { font-size: 1.12rem; max-width: 34em; color: #e9e1d6; }
.tagline { font: 1.8rem/1.2 var(--script); margin: .2em 0 1.1em; }
.tagline::after { content: ""; display: block; width: 150px; height: 5px; margin-top: 8px; background: var(--pink); border-radius: 4px; transform: rotate(-2deg); }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-art img { border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }

/* Why */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } }
.quote { font: italic 600 clamp(1.6rem, 3vw, 2.2rem)/1.3 var(--serif); margin: 0; border-left: 4px solid var(--pink); padding-left: 20px; }
.qa .lead-line { font: 600 1.4rem/1.35 var(--serif); margin-bottom: 20px; }
.qa details { border-top: 1px solid var(--line); }
.qa details:last-of-type { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font: 700 1.3rem/1.3 var(--serif); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-soft); color: var(--pink-deep); font: 600 1.4rem/1 var(--sans); transition: transform .2s; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--pink-deep); }
.qa details p { margin: 0 0 1em; }
.qa .sign { font-weight: 600; color: var(--pink-deep); margin: 24px 0 0; }
.lip-cover { width: min(300px, 100%); margin-top: 36px; border-radius: 18px; box-shadow: 0 20px 50px rgba(43, 36, 38, .18); }
@media (max-width: 860px) { .lip-cover { width: 240px; } }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 56px; }
.pillar { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--pink); border-radius: 14px; padding: 28px; }
.pillar h3 { font-size: 1.4rem; }
.pillar p { margin: 0; color: var(--muted); }

/* Listen */
.listen-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
@media (max-width: 860px) { .listen-grid { grid-template-columns: 1fr; } }
.socials { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.card-dark { background: var(--ink2); border: 1px solid #352c2f; border-radius: 18px; padding: clamp(24px, 4vw, 36px); }
.card-dark h3 { font-size: 1.6rem; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.inline-form input[type=email] { flex: 1 1 220px; background: #fff; }
.note { font-size: .9rem; margin: 10px 0 0; min-height: 1.4em; }

/* Share form */
.share-head { max-width: 760px; }
.share-head .lead { color: var(--text); }
.privacy { display: flex; gap: 10px; font-size: .92rem; color: var(--muted); }
.form-card { background: #fff; border-radius: 22px; padding: clamp(22px, 5vw, 52px); box-shadow: 0 20px 60px rgba(43, 36, 38, .08); max-width: 880px; margin: 40px auto 0; }
fieldset { border: 0; padding: 0; margin: 0 0 44px; min-width: 0; }
legend { font: 600 1.55rem var(--serif); margin-bottom: 20px; display: flex; align-items: center; gap: .55em; }
legend .num { font: 600 .8rem var(--sans); background: var(--ink); color: var(--cream); width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; }
.field { margin-bottom: 20px; }
.label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 8px; }
.opt { font-weight: 400; color: var(--muted); }
input[type=text], input[type=email], input[type=tel], textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .8em 1em; color: var(--text);
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper);
}
input:focus, textarea:focus { border-color: var(--pink); outline: none; box-shadow: 0 0 0 3px rgba(232, 96, 154, .2); }
textarea { min-height: 260px; resize: vertical; line-height: 1.6; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
/* Line up the boxes side by side even when one label wraps onto two lines. */
.two > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.two > .field > .label { align-self: end; }
@media (max-width: 640px) { .two { grid-template-columns: 1fr; } }

/* Chips: radios + checkboxes styled as pills, still real inputs for keyboard + screen readers */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .mode { position: relative; }
.chip input, .mode input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip > span { display: inline-block; padding: .5em 1.05em; border: 1.5px solid var(--line); border-radius: 999px; font-size: .9rem; background: var(--paper); }
.chip input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.chip input:focus-visible + span, .mode input:focus-visible + span { outline: 3px solid var(--pink); outline-offset: 2px; }
.chip:hover > span { border-color: var(--pink); }


.ideas { background: var(--paper); border-left: 4px solid var(--pink); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 4px 0 22px; font-size: .93rem; }
.ideas ul { margin: .4em 0 0; padding-left: 1.2em; }

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 640px) { .modes { gap: 8px; } .mode > span { padding: 12px 6px; } .mode small { display: none; } .mode b { font-size: .86rem; line-height: 1.25; } }
.mode > span { display: block; height: 100%; text-align: center; padding: 18px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); }
.mode b { display: block; font-size: 1rem; }
.mode small { color: var(--muted); font-size: .82rem; }
.mode i { display: block; font-style: normal; font-size: 1.7rem; margin-bottom: 4px; }
.mode input:checked + span { border-color: var(--pink); background: #fdf0f5; box-shadow: 0 0 0 1px var(--pink); }

.drop { display: block; border: 1.5px dashed #cfc3b6; border-radius: 14px; padding: 28px; text-align: center; background: var(--paper); cursor: pointer; transition: background .15s, border-color .15s; }
.drop.over { border: 2px dashed var(--pink); background: var(--pink-soft); }
.drop-icon { display: block; font-size: 1.6rem; color: var(--pink-deep); margin-bottom: 4px; }
.drop input { margin-top: 12px; max-width: 100%; }
.file-list { margin: 12px 0 0; padding-left: 1.2em; font-size: .92rem; }
.file-list li { margin-bottom: 6px; }
.file-remove { margin-left: 10px; padding: .15em .7em; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--pink-deep); font: 600 .8rem var(--sans); cursor: pointer; }
.file-remove:hover { border-color: var(--pink); }

.rec { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px; border: 1.5px dashed #cfc3b6; border-radius: 14px; text-align: center; background: var(--paper); }
.rec-time { font: 600 1.7rem var(--sans); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 10px; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #cfc3b6; }
.rec[data-state=recording] .rec-dot { background: var(--pink); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.rec-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rec [data-show] { display: none; }
.rec[data-state=idle] [data-show~=idle], .rec[data-state=recording] [data-show~=recording],
.rec[data-state=paused] [data-show~=paused], .rec[data-state=done] [data-show~=done] { display: inline-flex; }
.rec audio[data-show] { width: 100%; max-width: 420px; }

.draft-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.draft-status { font-size: .88rem; color: var(--muted); }
.btn-small { padding: .55em 1.1em; font-size: .85rem; }
.confirm { border: 0; border-radius: 18px; padding: 28px; width: min(380px, calc(100% - 40px)); color: var(--text); background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.confirm::backdrop { background: rgba(22, 19, 20, .55); }
.confirm-title { font: 600 1.35rem/1.3 var(--serif); margin-bottom: .3em; }
.confirm { max-height: calc(100dvh - 24px); overflow-y: auto; } /* with the keyboard open, scroll inside the dialog */
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }
.confirm .btn { padding: .7em 1.3em; }
.field-error { color: #b3261e; font-size: .86rem; font-weight: 500; margin: 6px 0 0; }
.invalid input[type=text], .invalid input[type=email] { border-color: #b3261e; }
.invalid .chip > span { border-color: #e2a39d; }
.consent.invalid { color: #b3261e; }
.write-us { width: min(480px, calc(100% - 32px)); }
.write-us textarea { min-height: 130px; }
.write-us .status { margin: 0; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; margin-bottom: 26px; }
.consent input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { margin: 14px 0 0; font-weight: 500; min-height: 1.5em; }
.status.err { color: #b3261e; }
.thanks { text-align: center; padding: 24px 0; }
.thanks .script { font-size: 3rem; }

/* About */
.about-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
@media (min-width: 861px) { .about-grid { grid-template-columns: 1fr auto; } .kata-photo { order: 2; } }
.about-grid img { border-radius: 18px; box-shadow: 0 20px 50px rgba(43, 36, 38, .18); }
/* Fixed size, and no long-press preview, drag or selection, so the photo can't be enlarged from the page. */
.kata-photo { width: 280px; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
@media (max-width: 860px) { .kata-photo { width: 220px; } }
.about h2 .script { font-size: 1.3em; }
.about { padding-top: 0; } /* continues "Sobre LIP" right above it */
.about .lead { color: var(--text); }

/* Privacy notice */
.privacy-sec { padding: 40px 0; }
.privacy-sec details { max-width: 760px; }
.privacy-sec summary { cursor: pointer; font: 600 1.25rem var(--serif); }
.privacy-sec h4 { font: 600 1rem var(--sans); margin: 1.4em 0 .3em; }
.privacy-sec p { font-size: .93rem; color: var(--muted); }
.privacy a, .privacy-sec a { color: var(--pink-deep); }

/* Help + footer */
.help { background: var(--pink-soft); padding: 40px 0; }
.help h3 { font-size: 1.4rem; margin-bottom: .3em; }
.help p { margin: 0; max-width: 60em; }
.site-footer { padding: 40px 0; font-size: .9rem; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-row nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-row nav a { text-decoration: none; }
.footer-row nav a:hover { color: var(--pink); }

/* "by KaTa" under the hero title */
.byline { margin: -.15em 0 .9em; font: 600 1.05rem var(--sans); letter-spacing: .14em; color: var(--cream); }
/* "Ver más" under each answer, and button rows */
.read-more { display: inline-block; margin: 0 0 16px; color: var(--pink-deep); font-weight: 600; text-decoration: none; }
.read-more:hover { text-decoration: underline; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.text-link { display: inline-block; margin: 2px 0 18px; color: var(--pink-deep); font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* Inner pages (Sobre LIPP, Sobre KaTa, Comparte, Blog) */
.page-head { padding: clamp(48px, 8vw, 90px) 0 clamp(20px, 4vw, 36px); }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
.page-head .lead { color: var(--text); max-width: 40em; }
.page-body { padding-top: 0; }
.prose { max-width: 720px; }
.prose p { font-size: 1.06rem; line-height: 1.75; }
.prose h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 1.8em 0 .6em; scroll-margin-top: 90px; }
.prose h2:first-child { margin-top: 0; }
.prose blockquote { margin: 1.2em 0; padding-left: 20px; border-left: 4px solid var(--pink); font: italic 600 1.25rem/1.45 var(--serif); }
.kata-page-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(32px, 6vw, 72px); align-items: start; }
@media (max-width: 860px) { .kata-page-grid { grid-template-columns: 1fr; } .kata-page-grid .kata-photo { order: -1; } }

/* Blog */
.post-list { display: grid; gap: 18px; max-width: 760px; margin: 0; padding: 0; list-style: none; }
.post-card { display: block; padding: 24px 26px; background: #fff; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; }
.post-card:hover { border-color: var(--pink); }
.post-card h2 { font-size: 1.5rem; margin-bottom: .3em; }
.post-card p { margin: 0; color: var(--muted); }
.post-date { color: var(--muted); font-size: .88rem; margin: 0 0 .5em; }
.post-body img { max-width: 100%; height: auto; border-radius: 12px; }
.back-link { display: inline-block; margin-bottom: 18px; color: var(--pink-deep); font-weight: 600; text-decoration: none; }

/* Recording parts: each take up to 20 minutes, listed under the recorder */
.takes { list-style: none; padding: 0; margin: 0; width: 100%; max-width: 480px; display: grid; gap: 10px; }
.takes li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: left; }
.takes audio { width: 100%; min-width: 0; }
.take-label { font-weight: 600; font-size: .9rem; white-space: nowrap; }
/* The story box grows with the text instead of scrolling inside itself */
#story { overflow: hidden; resize: none; }

.q { scroll-margin-top: 90px; }