/* Trébol Studio — landing v3 · claro y comercial (fusión Ordinaly + Dobuss)
   Identidad: verde botella + oro · Familia única: Bricolage Grotesque. */

:root {
  --fondo:   oklch(0.975 0.006 150);  /* claro, tintado hacia el verde de marca */
  --panel:   oklch(0.945 0.012 152);  /* superficies suaves */
  --tinta:   oklch(0.24 0.045 165);   /* texto principal, verde botella oscuro */
  --tinta-2: oklch(0.42 0.035 162);   /* texto secundario */
  --verde:   oklch(0.35 0.075 160);   /* verde de marca vivo */
  --bosque:  oklch(0.22 0.045 165);   /* bandas oscuras / footer */
  --oro:     oklch(0.66 0.115 85);    /* acento oro (legible sobre claro) */
  --oro-suave: oklch(0.80 0.095 88);
  --crema:   oklch(0.96 0.012 120);
  --borde:   oklch(0.24 0.045 165 / .13);
  --sombra:  0 18px 44px oklch(0.24 0.045 165 / .12);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  font-optical-sizing: auto;
  line-height: 1.6;
  overflow-x: clip;
}
::selection { background: var(--oro-suave); color: var(--bosque); }
.oro { color: var(--oro); }
img { max-width: 100%; height: auto; }

/* ---------- Cabecera ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px clamp(20px, 5vw, 56px);
  background: oklch(0.975 0.006 150 / .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--verde); text-decoration: none;
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
}
.marca-simbolo { transition: rotate .6s cubic-bezier(.16,1,.3,1); }
.marca:hover .marca-simbolo { rotate: 90deg; }
.top nav { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 30px); }
.top nav a {
  color: var(--tinta); text-decoration: none; font-size: 15px; font-weight: 600;
  opacity: .82; transition: opacity .2s, color .2s;
}
.top nav a:hover { opacity: 1; color: var(--verde); }
.top-cta {
  background: var(--verde); color: var(--crema) !important;
  padding: 10px 20px; border-radius: 999px; opacity: 1 !important;
  transition: background .25s !important;
}
.top-cta:hover { background: var(--bosque); }
@media (max-width: 720px) { .top nav a:not(.top-cta) { display: none; } }

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: clamp(56px, 11vh, 120px) clamp(20px, 5vw, 56px) clamp(44px, 8vh, 80px);
  max-width: 980px; margin: 0 auto;
}
.hero-kicker { font-size: 15px; font-weight: 700; color: var(--verde); margin-bottom: 18px; }
.hero-t {
  font-size: clamp(2.5rem, 6.5vw, 4.6rem);
  line-height: 1.06; font-weight: 800; letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero-t em { font-style: normal; color: var(--verde); }
.hero-t em.oro { color: var(--oro); font-style: italic; }
.hero-sub {
  max-width: 62ch; margin: 26px auto 0;
  font-size: clamp(16px, 1.9vw, 19px); color: var(--tinta-2);
}
.hero-sub strong { color: var(--tinta); }
.hero-ctas {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-top: 34px;
}
.hero-nota { margin-top: 20px; font-size: 14px; color: var(--tinta-2); }

.cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--verde); color: var(--crema);
  text-decoration: none; font-weight: 700; font-size: 16.5px;
  padding: 15px 28px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: inherit;
  transition: background .25s, translate .25s;
}
.cta:hover { background: var(--bosque); translate: 0 -2px; }
.cta-fantasma {
  background: transparent; color: var(--verde);
  border: 1.5px solid var(--verde);
}
.cta-fantasma:hover { background: var(--verde); color: var(--crema); }

/* ---------- Cinta marquee ---------- */
.cinta {
  border-block: 1px solid var(--borde);
  background: var(--bosque);
  overflow: hidden; padding: 13px 0;
}
.cinta-pista {
  display: flex; gap: 34px; width: max-content;
  animation: rodar 26s linear infinite;
  font-size: 15px; font-weight: 600; color: var(--crema);
  text-transform: lowercase; letter-spacing: .02em;
}
.cinta i { color: var(--oro-suave); font-style: normal; }
@keyframes rodar { to { translate: -50% 0; } }

/* ---------- Secciones ---------- */
.seccion-t {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  text-align: center; text-wrap: balance;
}
.seccion-sub {
  text-align: center; color: var(--tinta-2); max-width: 62ch;
  margin: 16px auto 0; font-size: 16.5px;
}

/* ---------- Servicios ---------- */
.hacemos { padding: clamp(60px, 10vh, 110px) clamp(20px, 5vw, 56px); }
.lista-ia {
  list-style: none; padding: clamp(26px, 4vw, 40px);
  margin: clamp(36px, 6vh, 54px) auto 0; max-width: 1000px;
  background: var(--panel); border-radius: 22px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px 28px; font-weight: 600; font-size: 16px;
}
.lista-ia li { display: flex; align-items: center; gap: 10px; }
.lista-ia li::before {
  content: "＋"; flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--verde); color: var(--crema);
  font-size: 13px; font-weight: 800;
}
.tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; max-width: 1100px; margin: clamp(36px, 6vh, 54px) auto 0;
}
.tarjeta {
  background: #fff; border: 1px solid var(--borde); border-radius: 20px;
  padding: 30px 28px; box-shadow: var(--sombra);
  transition: translate .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.tarjeta:hover { translate: 0 -6px; box-shadow: 0 26px 56px oklch(0.24 0.045 165 / .18); }
.tarjeta-arte {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; font-size: 26px;
  background: var(--panel); margin-bottom: 18px;
}
.tarjeta h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 10px; }
.tarjeta p { color: var(--tinta-2); font-size: 15.5px; }
.enlace {
  display: inline-block; margin-top: 16px;
  color: var(--oro); text-decoration: none; font-weight: 700; font-size: 15.5px;
  border-bottom: 1.5px solid transparent; transition: border-color .25s;
}
.enlace:hover { border-color: var(--oro); }

/* ---------- Banda CTA ---------- */
.banda {
  background: var(--verde); color: var(--crema);
  border-radius: 26px; max-width: 1100px;
  margin: 0 auto; padding: clamp(40px, 7vh, 64px) clamp(24px, 5vw, 60px);
  text-align: center;
}
.banda h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.banda p { max-width: 62ch; margin: 14px auto 26px; color: oklch(0.90 0.02 150); font-size: 16.5px; }
.cta-clara { background: var(--crema); color: var(--bosque); }
.cta-clara:hover { background: #fff; color: var(--bosque); }
@media (max-width: 1150px) { .banda { margin-inline: clamp(16px, 4vw, 40px); } }

/* ---------- Productos ---------- */
.productos { padding: clamp(70px, 11vh, 120px) clamp(20px, 5vw, 56px); }
.prod {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px, 6vw, 80px); align-items: center;
  max-width: 1020px; margin: clamp(44px, 7vh, 70px) auto 0;
}
.prod-invertido .prod-media { order: 2; }
.prod-media { display: grid; place-items: center; }
.prod-media img {
  border-radius: 22px; box-shadow: var(--sombra);
  rotate: -2deg; transition: rotate .5s cubic-bezier(.16,1,.3,1), scale .5s cubic-bezier(.16,1,.3,1);
}
.prod-invertido .prod-media img { rotate: 2deg; }
.prod:hover .prod-media img { rotate: 0deg; scale: 1.02; }
.prod-media-diario img { border-radius: 30%; background: var(--panel); padding: 14px; max-width: 320px; }
.prod-info h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.prod-info p { color: var(--tinta-2); font-size: 16px; max-width: 44ch; }
@media (max-width: 760px) {
  .prod { grid-template-columns: 1fr; }
  .prod-invertido .prod-media { order: 0; }
  .prod-media img { max-width: 300px; }
}

/* ---------- Por qué elegirnos ---------- */
.porque {
  background: var(--panel);
  padding: clamp(64px, 10vh, 110px) clamp(20px, 5vw, 56px);
}
.porque-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 26px; max-width: 1100px; margin: clamp(36px, 6vh, 54px) auto 0;
}
.razon {
  background: #fff; border-radius: 18px; padding: 26px 24px;
  border: 1px solid var(--borde);
}
.razon h3 { font-size: 1.2rem; font-weight: 800; color: var(--verde); margin-bottom: 8px; }
.razon p { color: var(--tinta-2); font-size: 15px; }
.razon strong { color: var(--tinta); }
.porque-firma {
  text-align: center; margin-top: 36px;
  font-weight: 700; color: var(--oro); font-size: 1.15rem; letter-spacing: .03em;
}

/* ---------- FAQ ---------- */
.faq { padding: clamp(64px, 10vh, 110px) clamp(20px, 5vw, 56px); }
.faq-lista { max-width: 800px; margin: clamp(30px, 5vh, 44px) auto 0; }
.faq details {
  border-bottom: 1px solid var(--borde);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-weight: 700; font-size: clamp(16px, 2vw, 18px);
  padding: 18px 4px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "＋"; color: var(--oro); font-weight: 800; font-size: 20px; flex: none;
  transition: rotate .3s;
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { color: var(--tinta-2); padding: 0 4px 18px; max-width: 68ch; }

/* ---------- Contacto ---------- */
.contacto {
  background: var(--bosque); color: var(--crema);
  padding: clamp(70px, 11vh, 130px) clamp(20px, 5vw, 56px);
}
.contacto-t {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 800; line-height: 1.0; letter-spacing: -0.03em;
  text-align: center; text-wrap: balance;
}
.contacto-sub {
  text-align: center; color: oklch(0.82 0.02 150); max-width: 56ch;
  margin: 20px auto 50px; font-size: 16.5px;
}
.form {
  max-width: 720px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px 34px;
}
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo-ancho { grid-column: 1 / -1; }
.campo span { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oro-suave); }
.campo input, .campo textarea {
  background: transparent; border: 0;
  border-bottom: 1.5px solid oklch(0.96 0.012 120 / .35);
  color: var(--crema); padding: 10px 2px 12px;
  font: inherit; font-size: 17px; resize: vertical;
  transition: border-color .25s;
}
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--oro-suave); }
.campo ::placeholder { color: oklch(0.82 0.02 150 / .85); }
.cta-envio {
  grid-column: 1 / -1; justify-self: center; min-width: 220px; justify-content: center;
  background: var(--oro-suave); color: var(--bosque);
}
.cta-envio:hover { background: oklch(0.86 0.11 92); }
.form-nota { grid-column: 1 / -1; text-align: center; color: oklch(0.82 0.02 150); font-size: 14.5px; }
.form-nota a { color: var(--oro-suave); }
.form-gracias { grid-column: 1 / -1; text-align: center; font-size: 1.2rem; font-weight: 700; padding: 30px 0; }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

/* ---------- Pie ---------- */
.pie {
  background: var(--bosque); color: oklch(0.82 0.02 150);
  border-top: 1px solid oklch(0.96 0.012 120 / .12);
  padding: 44px 20px 40px; text-align: center; font-size: 14.5px;
}
.pie svg { color: var(--oro-suave); margin-bottom: 14px; }
.pie-nav { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.pie a { color: var(--crema); text-decoration: none; font-weight: 600; }
.pie a:hover { color: var(--oro-suave); }

/* ---------- Reveals ---------- */
.js .reveal { opacity: 0; translate: 0 24px; transition: opacity .7s ease, translate .7s cubic-bezier(.16,1,.3,1); }
.js .reveal.in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .cinta-pista { animation: none; }
  .js .reveal { opacity: 1; translate: 0 0; transition: none; }
  .cta:hover, .tarjeta:hover { translate: 0 0; }
}