/* ===================================================================
   CASA CORAZÓN CONSCIENTE — estilos
   Paleta tierra · Tipografía Roboto / Roboto Slab (Google Fonts)
   =================================================================== */

:root{
  /* paleta tierra */
  --c1:#C1654A; /* terracota   */
  --c2:#C08A2E; /* ocre        */
  --c3:#6B7A4F; /* oliva       */
  --c4:#A56A56; /* arcilla     */
  --c5:#7E8C6A; /* salvia      */
  --c6:#8C4A2F; /* siena       */

  --bg:#F4ECDD;        /* arena claro   */
  --bg-soft:#EDE2CC;   /* arena medio   */
  --ink:#3A2B22;       /* tierra oscura */
  --ink-soft:#6B5A4C;
  --paper:#FBF6EC;

  --accent: var(--c1);
  --shadow: 0 30px 60px -25px rgba(58,43,34,.45);

  --font-body: 'Roboto', sans-serif;
  --font-display: 'Roboto Slab', serif;
}

[data-color="1"]{ --accent: var(--c1); }
[data-color="2"]{ --accent: var(--c2); }
[data-color="3"]{ --accent: var(--c3); }
[data-color="4"]{ --accent: var(--c4); }
[data-color="5"]{ --accent: var(--c5); }
[data-color="6"]{ --accent: var(--c6); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

#track{ width:100%; }

/* ---------- secciones ---------- */
.section{
  position:relative;
  width:100%;
  padding: 7rem 7vw;
  background: color-mix(in srgb, var(--accent) 13%, var(--paper));
  opacity:0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.section.in-view{ opacity:1; transform:none; }

.section.dark{
  background: linear-gradient(155deg, var(--ink) 0%, var(--accent) 145%);
  color: var(--paper);
}

.section-inner{
  position:relative;
  z-index:2;
  max-width: 1180px;
  margin: 0 auto;
}
.section-inner.narrow{ max-width: 760px; }

.section-head{
  max-width: 760px;
  margin: 0 auto 2.4rem auto;
  text-align:center;
}

/* ---------- tipografía compartida ---------- */
.numeral-tag{
  display:inline-flex;
  align-items:center;
  font-family: var(--font-body);
  font-weight:500;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.section.dark .numeral-tag{ color: var(--c2); }
.numeral-tag::before{
  content:"";
  display:inline-block;
  width:1.4rem; height:2px;
  margin-right:.7rem;
  background: currentColor;
}

.section-heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.1vw, 2.6rem);
  line-height: 1.15;
  color: var(--accent);
  margin: 0 0 1.1rem 0;
  letter-spacing: -.01em;
}
.section.dark .section-heading{ color: var(--paper); }

.section-text{
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 1rem 0;
  font-weight: 300;
}
.section.dark .section-text{ color: #E7DCC8; }

.section-text--lead{
  font-size: 1.15rem;
  color: var(--ink);
  font-weight: 400;
}
.section.dark .section-text--lead{ color: var(--paper); }

.section-text.emphasis{
  font-style: italic;
  color: var(--ink);
  font-weight: 400;
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  display:inline-block;
}
.section.dark .section-text.emphasis{ border-left-color: var(--c2); color:#FBF6EC; }

.center-text{ text-align:center; max-width:640px; margin-left:auto; margin-right:auto; border-left:none; padding-left:0; }
.center-text.emphasis{ border-left:none; padding-left:0; }

/* ---------- grid de columnas (dimensiones / servicios) ---------- */
.col-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 0 0 2.6rem 0;
}

.col-card{
  background: var(--paper);
  border-radius: 10px;
  padding: 2.2rem 1.7rem;
  border-top: 1px solid var(--accent);
  box-shadow: 0 20px 40px -30px rgba(58,43,34,.5);
}

.col-icon{
  width: 54px; height: 54px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--paper));
  color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 1.3rem;
}
.col-icon svg{ width: 26px; height: 26px; }

.col-tag{
  display:block;
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  color: var(--accent);
  margin-bottom:.4rem;
}

.col-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--ink);
  margin: 0 0 .65rem 0;
}

.col-text{
  font-size: .96rem;
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}

/* ---------- listas ---------- */
.check-list{
  list-style:none;
  margin: 1.2rem 0 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.check-list li{
  position:relative;
  padding-left: 2rem;
  color: var(--ink-soft);
  font-weight:300;
  line-height:1.5;
}
.check-list li::before{
  content:"✓";
  position:absolute;
  left:0; top:0;
  color: var(--accent);
  font-weight:700;
}
.check-list--grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem 2rem;
}

.feeling-tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: .9rem;
  margin: 1.6rem 0 2rem 0;
  padding:0;
}
.feeling-tags li{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--accent);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--accent), transparent);
  border-radius: 3pt;
  padding: .6rem 1.5rem;
}

/* ---------- logo (sección 1) ---------- */
.logo-mark{
  display:flex;
  justify-content:center;
  margin-bottom: 1.6rem;
  color: var(--paper);
}

/* ---------- HERO ---------- */
.hero{ padding-top: 9rem; padding-bottom: 9rem; }
.hero-inner{ max-width: 760px; text-align:center; }
.hero .eyebrow{
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:.72rem;
  font-weight:500;
  color: var(--c2);
  margin-bottom: 1.4rem;
}
.hero-title{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.3rem, 6.2vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 1.6rem 0;
  color: #FBF6EC;
  text-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.hero-sub{
  color: var(--c2);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
}

/* ---------- CTA ---------- */
.cta-section{ text-align:center; }
.cta-inner{ max-width: 680px; margin: 0 auto; }

.cta-button{
  display:inline-block;
  margin-top: 1.8rem;
  padding: 1.05rem 2.4rem;
  background: var(--c2);
  color: #2E2113;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration:none;
  text-transform:uppercase;
  font-size:.85rem;
  border-radius: 2px;
  box-shadow: 0 18px 35px -12px rgba(0,0,0,.5);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.cta-button:hover,
.cta-button:focus-visible{
  transform: translateY(-3px);
  background:#D89B3F;
  box-shadow: 0 22px 45px -10px rgba(0,0,0,.55);
}
.cta-button:focus-visible{ outline: 2px solid #FBF6EC; outline-offset:3px; }

/* ---------- navegación de puntos ---------- */
.dots{
  position: fixed;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.dots button{
  width:9px; height:9px;
  border-radius:50%;
  border: 1.5px solid var(--ink-soft);
  background: transparent;
  opacity:.55;
  cursor:pointer;
  padding:0;
  transition: all .35s ease;
}
.dots button.active{
  background: var(--ink);
  border-color: var(--ink);
  opacity:1;
  transform: scale(1.3);
}
.dots button:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* ---------- responsive ---------- */
@media (max-width: 880px){
  .dots{ display:none; }
  .section{ padding: 5rem 6vw; }
  .col-grid{ grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
  .check-list--grid{ grid-template-columns: 1fr; }
  .hero-title{ font-size: clamp(2rem, 9vw, 3rem); }
}

@media (max-width: 560px){
  .col-grid{ grid-template-columns: 1fr; }
  .feeling-tags li{ font-size:.95rem; padding:.5rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .section{ opacity:1; transform:none; transition:none; }
  .cta-button{ transition:none; }
}