/*
Theme Name: Susurros del Alma
Theme URI: https://example.com
Author: Marysol Marquez
Author URI: https://example.com
Description: Landing page a medida "Susurros del Alma" — tema de una sola página para WordPress, sin builders ni plugins. Todo el contenido (textos, fotos, colores y el reproductor de música) se edita desde Apariencia → Personalizar, con vista previa en vivo. Ver README.txt incluido.
Version: 1.4
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: susurros-del-alma
*/

/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */
:root{
  --paper:        #ECE4D6;
  --paper-deep:    #E1D6C2;
  --paper-warm:    #EFE8DC;
  --ink:           #37312A;
  --ink-soft:      #6B6155;
  --terracotta:    #C17A5B;
  --terracotta-dk: #A05F41;
  --sage:          #8C9473;
  --sage-dk:       #6E7659;
  --sage-pale:     #B9C0A4;
  --gold:          #AD8B54;
  --cream-card:    #F5F0E6;
  --line:          rgba(55,49,42,0.14);

  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-hand:    'Dancing Script', cursive;
  --font-body:    'EB Garamond', Georgia, serif;
  --font-label:   'Cormorant Garamond', Georgia, serif;

  --max: 1180px;
}

/* =========================================================
   1. RESET & BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.susurros{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  margin:0 0 .5em;
  color:var(--ink);
  letter-spacing:.01em;
}
p{ margin:0 0 1em; }
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 40px;
}
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--terracotta-dk); outline-offset:3px; }

.grain{
  pointer-events:none;
  position:fixed; inset:0; z-index:9999;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   2. UTILITIES
   ========================================================= */
.eyebrow{
  font-family:var(--font-label);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:13px;
  color:var(--terracotta-dk);
}
.btn{
  display:inline-block;
  background:var(--terracotta);
  color:#fff;
  font-family:var(--font-label);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  padding:16px 34px;
  border:none;
  border-radius:2px;
  transition:background .25s ease, transform .25s ease;
}
.btn:hover{ background:var(--terracotta-dk); transform:translateY(-1px); }
.btn.btn-block{ display:block; width:100%; text-align:center; }

.section{ position:relative; padding:96px 0; }
.section--tight{ padding:64px 0; }
.section-title{ font-size:clamp(28px,3.4vw,42px); }
.center{ text-align:center; }

/* alternating paper backgrounds + torn-edge seam (brand signature) */
.bg-a{ background:var(--paper); }
.bg-b{ background:var(--paper-deep); }
.torn{ position:relative; }
.torn::before{
  content:"";
  position:absolute; left:0; right:0; top:-27px; height:28px;
  pointer-events:none; z-index:1;
}
.bg-a.torn::before{
  background:var(--paper);
  clip-path:polygon(0 100%,3% 35%,6% 85%,9% 30%,12% 80%,15% 40%,18% 90%,21% 35%,24% 85%,27% 30%,30% 80%,33% 45%,36% 95%,39% 35%,42% 85%,45% 40%,48% 90%,51% 30%,54% 80%,57% 45%,60% 95%,63% 35%,66% 85%,69% 30%,72% 80%,75% 40%,78% 90%,81% 35%,84% 85%,87% 30%,90% 80%,93% 40%,96% 90%,100% 100%);
}
.bg-b.torn::before{
  background:var(--paper-deep);
  clip-path:polygon(0 100%,3% 35%,6% 85%,9% 30%,12% 80%,15% 40%,18% 90%,21% 35%,24% 85%,27% 30%,30% 80%,33% 45%,36% 95%,39% 35%,42% 85%,45% 40%,48% 90%,51% 30%,54% 80%,57% 45%,60% 95%,63% 35%,66% 85%,69% 30%,72% 80%,75% 40%,78% 90%,81% 35%,84% 85%,87% 30%,90% 80%,93% 40%,96% 90%,100% 100%);
}

/* photo blocks — real photos, cropped to fill their frame */
.photo-block{
  position:relative;
  width:100%;
  height:100%;
  border-radius:2px;
  overflow:hidden;
  background:var(--paper-deep);
  min-height:220px;
}
.photo-block img{
  width:100%; height:100%;
  min-height:220px;
  object-fit:cover;
  object-position:center top;
  display:block;
}

/* icon circles (real watercolor line-art PNGs) */
.icon-line{ width:56px; height:56px; margin:0 auto 14px; }
.icon-line img{ width:100%; height:100%; object-fit:contain; display:block; }

/* scroll-reveal (progressive enhancement — only active once JS adds .js-reveal) */
html.js-reveal .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
html.js-reveal .reveal.is-visible{ opacity:1; transform:none; }

/* gentle hover polish */
.s-card{ transition:transform .3s ease, box-shadow .3s ease; }
.s-card:hover{ transform:translateY(-6px); box-shadow:0 16px 30px rgba(55,49,42,.12); }
.gallery-item .photo-block img{ transition:transform .6s ease; }
.gallery-item:hover .photo-block img{ transform:scale(1.05); }

/* =========================================================
   3. HEADER / HERO
   ========================================================= */
.hero{ background:var(--paper-warm); overflow:hidden; position:relative; }
.hero::after{
  content:"";
  position:absolute; top:-60px; right:-70px; width:360px; height:360px;
  background:url('images/icon-wave-sage.png') no-repeat center/contain;
  opacity:.16; pointer-events:none; transform:rotate(6deg); z-index:0;
}
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; gap:0; }
.hero-copy{ padding:64px 56px 64px 40px; display:flex; flex-direction:column; justify-content:center; }
.brand{ margin-bottom:34px; }
.brand-mark{ display:block; width:34px;height:34px;color:var(--gold);margin-bottom:10px; }
.brand-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.brand-name{ font-family:var(--font-display); font-size:34px; line-height:1.05; margin:0; }
.brand-name em{ font-style:normal; display:block; font-size:20px; font-weight:400; }
.brand-by{ font-family:var(--font-hand); font-size:20px; color:var(--terracotta-dk); margin-top:2px; }
.hero h1{ font-size:clamp(30px,3.6vw,44px); line-height:1.15; max-width:520px; }
.hero-sub{ max-width:480px; color:var(--ink-soft); font-size:19px; }
.hero-cta{ margin-top:12px; }
.hero-photo{ position:relative; min-height:520px; }
.hero-photo .photo-block{ position:absolute; inset:0; min-height:100%; border-radius:0; }

/* =========================================================
   4. "QUIZÁ TE RECONOCES"
   ========================================================= */
.recognize-head{ max-width:560px; margin-bottom:48px; }
.recognize-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:28px; text-align:center; }
.recognize-item p{ font-size:16px; color:var(--ink-soft); margin:0; }

/* =========================================================
   5. LOOP DIAGRAM
   ========================================================= */
.loop-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; }
.loop-copy p.lede{ font-size:22px; max-width:340px; }
.loop-copy p.small{ color:var(--ink-soft); }
.loop-diagram{ position:relative; display:flex; flex-direction:column; gap:26px; padding:30px 34px; }
.loop-track{ position:absolute; inset:0; border:1.5px solid var(--gold); opacity:.32; border-radius:46px; pointer-events:none; }
.loop-turn{ position:absolute; top:50%; width:0; height:0; margin-top:-6px; opacity:.65; pointer-events:none; }
.loop-turn--right{ right:2px; border-left:8px solid var(--gold); border-top:6px solid transparent; border-bottom:6px solid transparent; }
.loop-turn--left{ left:2px; border-right:8px solid var(--gold); border-top:6px solid transparent; border-bottom:6px solid transparent; }
.loop-row{ display:flex; align-items:center; justify-content:space-between; }
.loop-row.reverse{ flex-direction:row-reverse; }
.loop-node{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.12em; font-size:15px; white-space:nowrap; }
.loop-arrow{ flex:1; height:1px; background:var(--gold); margin:0 14px; position:relative; }
.loop-arrow::after{ content:""; position:absolute; right:0; top:-4px; border:5px solid transparent; border-left-color:var(--gold); }
.loop-row.reverse .loop-arrow::after{ right:auto; left:0; border-left-color:transparent; border-right-color:var(--gold); }

/* =========================================================
   6. THREE COLUMN COMPARISON
   ========================================================= */
.compare-grid{ display:grid; grid-template-columns:1fr .8fr 1fr; gap:40px; align-items:start; }
.compare-col h3{ font-size:22px; margin-bottom:22px; }
.compare-list li{ display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; font-size:16px; color:var(--ink-soft); }
.compare-list .mark{ flex:none; font-weight:700; }
.compare-list.no .mark{ color:var(--terracotta-dk); }
.compare-list.yes .mark{ color:var(--sage-dk); }
.compare-quote{ text-align:center; font-family:var(--font-display); font-size:19px; line-height:1.5; color:var(--ink); padding:14px 8px; }
.compare-quote .crown{ display:block; width:30px; height:30px; margin:0 auto 14px; }
.compare-quote .crown img{ width:100%; height:100%; object-fit:contain; display:block; }

/* =========================================================
   7. LIFE GALLERY
   ========================================================= */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.gallery-item{ position:relative; }
.gallery-item .photo-block{ aspect-ratio:3/3.6; min-height:0; }
.gallery-caption{
  position:absolute; left:16px; right:16px; bottom:16px;
  background:rgba(140,148,115,.88); color:#fff;
  font-family:var(--font-display); font-style:italic; font-size:15px;
  text-align:center; padding:10px 14px; border-radius:2px;
}
.gallery-quote{ text-align:center; margin-top:40px; font-family:var(--font-hand); font-size:26px; color:var(--terracotta-dk); }

/* =========================================================
   8. SIX STEPS STRIP
   ========================================================= */
.steps-strip{ text-align:center; }
.steps-strip-head{ max-width:640px; margin:0 auto 44px; }
.steps-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; align-items:start; margin-bottom:36px; }
.steps-row .step-node{ font-family:var(--font-label); font-size:14px; letter-spacing:.06em; }
.steps-row .step-with-arrow{ position:relative; }
.steps-row .step-with-arrow:not(:last-child)::after{ content:"→"; position:absolute; top:26px; right:-16px; color:var(--gold); }
.steps-strip .fine{ max-width:640px; margin:0 auto; color:var(--ink-soft); }

/* =========================================================
   9. SIX SUSURROS CARDS
   ========================================================= */
.susurros-head{ text-align:center; margin-bottom:52px; }
.susurros-head h2{ font-family:var(--font-label); letter-spacing:.16em; text-transform:uppercase; font-size:22px; }
.cards-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.s-card{ background:var(--cream-card); border:1px solid var(--line); padding:30px 18px 26px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.s-card .roman{ font-family:var(--font-display); font-style:italic; color:var(--terracotta-dk); font-size:15px; margin-bottom:14px; }
.s-card h3{ font-size:15px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; min-height:38px; }
.s-card p{ font-size:14px; color:var(--ink-soft); flex:1; margin-bottom:20px; }
.s-card .btn{ font-size:11px; padding:14px 10px; width:100%; }

/* =========================================================
   10. WHAT'S INCLUDED
   ========================================================= */
.included-grid{ display:grid; grid-template-columns:.85fr .9fr 1.05fr; gap:40px; align-items:center; }
.included-list li{ padding:10px 0; border-bottom:1px solid var(--line); font-size:16px; }
.included-list li:first-child{ padding-top:0; }
.facts{ background:var(--cream-card); border:1px solid var(--line); padding:22px; }
.facts li{ display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); font-family:var(--font-label); font-size:15px; }
.facts li:last-child{ border-bottom:none; }
.facts li span:first-child{ color:var(--ink-soft); }
.ends-block{ text-align:center; }
.ends-block .photo-block{ aspect-ratio:1/1.05; margin-bottom:20px; }
.ends-block h3{ font-family:var(--font-display); font-size:20px; margin-bottom:12px; }
.player-wrap{ margin:14px 0; }
.media-embed{ width:100%; display:block; }
.media-embed--video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:#000; }
.media-embed--video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.media-embed--spotify iframe,
.media-embed--soundcloud iframe{ border:0; border-radius:10px; display:block; }
.media-embed--audio{ width:100%; accent-color:var(--terracotta); border-radius:20px; }
.media-embed--fallback{ margin-top:6px; }
.ends-block blockquote{ font-family:var(--font-display); font-style:italic; font-size:14px; color:var(--ink-soft); margin:14px 0 0; }
.soon-tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-label); letter-spacing:.1em; text-transform:uppercase; font-size:12px; color:var(--terracotta-dk); }
.soon-tag::before{ content:""; width:7px;height:7px;border-radius:50%; background:var(--terracotta); }

/* =========================================================
   11. TIMELINE ROW / TESTIMONIALS BOX
   ========================================================= */
.timeline-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; align-items:center; padding-top:56px; padding-bottom:56px; }
.timeline-row .mark-icon{ display:inline-block; width:40px;height:40px; margin-bottom:10px; }
.timeline-row .mark-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.timeline-row p{ margin:0; color:var(--ink-soft); }
.timeline-row strong{ color:var(--ink); }
.testi-box{ background:var(--paper-deep); border:1px solid var(--line); padding:26px; text-align:center; font-family:var(--font-label); letter-spacing:.06em; text-transform:uppercase; font-size:14px; }
.testi-box div{ padding:6px 0; }
.testi-box hr{ border:none; border-top:1px solid var(--line); width:40px; margin:6px auto; }

/* =========================================================
   12. FAQ
   ========================================================= */
.faq-wrap{ display:grid; grid-template-columns:.7fr 1.3fr; gap:40px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:none; display:flex; justify-content:space-between; align-items:center; padding:18px 0; font-family:var(--font-display); font-size:19px; color:var(--ink); }
.faq-q .plus{ font-size:20px; color:var(--terracotta); transition:transform .25s ease; flex:none; margin-left:16px; }
.faq-item.open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--ink-soft); font-size:16px; }
.faq-a p{ padding-bottom:18px; margin:0; }

/* =========================================================
   13. FOOTER CTA
   ========================================================= */
.footer-cta{ position:relative; overflow:hidden; }
.footer-cta::after{
  content:"";
  position:absolute; bottom:-60px; left:-60px; width:320px; height:320px;
  background:url('images/icon-flame-terracotta.png') no-repeat center/contain;
  opacity:.12; pointer-events:none; transform:rotate(-8deg); z-index:0;
}
.footer-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; }
.footer-copy{ padding:80px 56px 80px 40px; }
.footer-copy h2{ font-size:clamp(26px,3vw,36px); }
.footer-copy p{ color:var(--ink-soft); max-width:440px; }
.footer-photo{ min-height:420px; }
.footer-photo .photo-block{ height:420px; border-radius:0; }

/* =========================================================
   14. SITE FOOTER (WP bits)
   ========================================================= */
.site-footer-meta{ text-align:center; padding:26px 0; font-size:13px; color:var(--ink-soft); }

/* =========================================================
   14b. STICKY MOBILE CTA
   ========================================================= */
.mobile-sticky-cta{ display:none; }
@media (max-width:760px){
  .mobile-sticky-cta{
    display:block;
    position:fixed; left:0; right:0; bottom:0; z-index:500;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(236,228,214,.97);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(55,49,42,.1);
    transform:translateY(110%);
    transition:transform .3s ease;
  }
  .mobile-sticky-cta.is-visible{ transform:translateY(0); }
  .mobile-sticky-cta .btn{ padding:14px 20px; font-size:13px; }
}
@media (prefers-reduced-motion: reduce){
  .mobile-sticky-cta{ transition:none; }
}

/* =========================================================
   15. RESPONSIVE
   ========================================================= */

/* ---- Tablet (landscape tablets, small laptops) ---- */
@media (max-width:1080px){
  .container{ padding:0 32px; }
  .cards-grid{ grid-template-columns:repeat(3,1fr); }
  .hero-copy{ padding:56px 40px; }
}

/* ---- Tablet (portrait) ---- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo{ min-height:360px; order:-1; }
  .hero::after{ width:220px; height:220px; top:-30px; right:-40px; }
  .recognize-grid{ grid-template-columns:repeat(3,1fr); row-gap:36px; }
  .compare-grid{ grid-template-columns:1fr; gap:32px; }
  .loop-wrap{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .steps-row{ grid-template-columns:repeat(3,1fr); row-gap:34px; }
  .steps-row .step-with-arrow::after{ display:none; }
  .included-grid{ grid-template-columns:1fr; }
  .timeline-row{ grid-template-columns:1fr; text-align:center; }
  .faq-wrap{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-photo{ order:-1; min-height:320px; }
  .footer-photo .photo-block{ height:320px; }
  .footer-copy{ padding:56px 32px; }
}

/* ---- Large phone / small tablet ---- */
@media (max-width:760px){
  .recognize-grid{ grid-template-columns:repeat(2,1fr); }
  .cards-grid{ grid-template-columns:repeat(2,1fr); }
  .loop-row{ flex-wrap:wrap; row-gap:10px; justify-content:center; }
  .loop-arrow{ min-width:26px; }
  .loop-diagram{ padding:22px 10px; }
  .loop-track, .loop-turn{ display:none; }
}

/* ---- Phone ---- */
@media (max-width:560px){
  .container{ padding:0 22px; }
  .hero-copy{ padding:44px 22px; }
  .hero-photo{ min-height:300px; }
  .hero::after{ display:none; }
  .brand-name{ font-size:29px; }
  .recognize-grid{ grid-template-columns:repeat(2,1fr); gap:22px; }
  .steps-row{ grid-template-columns:repeat(2,1fr); }
  .cards-grid{ grid-template-columns:1fr; }
  .footer-cta::after{ display:none; }
  .footer-copy{ padding:44px 22px; }
  .footer-photo{ min-height:260px; }
  .footer-photo .photo-block{ height:260px; }
  body.susurros{ font-size:17px; }
  .torn::before{ height:18px; top:-17px; }
}

/* ---- Small phone ---- */
@media (max-width:380px){
  .recognize-grid{ grid-template-columns:1fr 1fr; gap:18px; }
  .steps-row{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:26px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn, .faq-a, .faq-q .plus, .s-card, .gallery-item .photo-block img{ transition:none; }
  html.js-reveal .reveal{ opacity:1; transform:none; transition:none; }
}