/* ===============================
   Colombo · Landing Cuadernos (v2)
   Enfoque: limpio, centrado, discreto
================================== */

/* --------- Variables --------- */
:root{
  --brand: #6B2737;     /* bordeau: luego reemplazalo por el color exacto */
  --bg: #1f1b1d;
  --txt: #f5f5f6;
  --txt-muted: #cfcfd4;
  --surface: #2a2527;
  --surface-2: #322b2e;
  --border: #41383c;

  --accent: #ffd166;

  --radius: 14px;
  --shadow: 0 8px 20px rgba(0,0,0,.25);

  --maxw: 1080px;
  --gap: clamp(16px, 2vw, 24px);

  --fs-hero: clamp(28px, 4vw, 42px);
  --fs-h2: clamp(22px, 2.6vw, 30px);
  --fs-h3: clamp(16px, 2vw, 20px);
  --fs-base: clamp(14px, 1.1vw, 16px);
  --fs-small: clamp(12px, .95vw, 14px);
}

/* --------- Reset mínimo --------- */
*,
*::before,
*::after{ box-sizing: border-box; }
html, body{ height: 100%; }
html {
  scroll-behavior: smooth;
}
body{
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--txt);
  background:
    radial-gradient(900px 900px at 120% -20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(700px 700px at -20% 120%, rgba(0,0,0,.25), transparent 60%),
    linear-gradient(180deg, var(--brand) 0%, var(--bg) 60%);
  background-attachment: fixed;
}

a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{
  width: min(100% - 2*var(--gap), var(--maxw));
  margin-inline: auto;
}

/* --------- Header fijo y limpio --------- */
.header{
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(8px);
  background: rgba(15,13,14,.5);
  border-bottom: 1px solid var(--border);
}
.header .container{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
}
.logo{
  color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .2px;
  font-size: 1rem;
}
.logo img{
  height: 42px;         /* ajustá según el alto real de tu logo */
  width: auto;
  display: block;
}
.nav{ display: flex; align-items: center; gap: 16px; }
.nav a{ color: var(--txt-muted); font-weight: 600; }
.nav a:hover{ color: #fff; }

/* --------- Botón (chico/mediano) --------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .6rem .9rem;                 /* más chico */
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: #fff;
  color: #222;
  font-weight: 700;
  font-size: 0.95rem;                   /* tipografía contenida */
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn:active{ transform: translateY(0); }

.btn.cta{
  background: linear-gradient(180deg, var(--accent), #e8be55);
  color: #2a2207; border: none;
}

/* --------- Hero centrado y equilibrado --------- */
.hero{ padding: clamp(40px, 8vw, 88px) 0 40px; }
.hero .container{
  display: grid; gap: var(--gap);
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
}
@media (max-width: 980px){
  .hero .container{ grid-template-columns: 1fr; text-align: center; }
}

.hero__copy h1{
  font-size: var(--fs-hero);
  line-height: 1.15;
  margin: 0 0 .5em;
}
.hero__copy p{
  color: var(--txt-muted);
  margin: 0 0 1rem;
  max-width: 56ch;
}
.hero__cta{ display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 980px){ .hero__cta{ justify-content: center; } }

.hero picture, .hero img{
  width: 100%; height: auto; display: block;
  border-radius: 16px;
  box-shadow: var(--shadow);
  background: var(--surface);
}

/* --------- Secciones --------- */
section{ padding: clamp(32px, 6vw, 64px) 0; }
section > .container > h2{
  font-size: var(--fs-h2);
  margin: 0 0 .4rem;
  text-align: center;
}
.lead{ color: var(--txt-muted); text-align: center; margin: 0 auto 24px; max-width: 68ch; }

/* --------- Cards limpias --------- */
.grid{
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .grid{ grid-template-columns: 1fr; } }

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease;
  text-align: center;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.24); }
.card h3{ font-size: var(--fs-h3); margin: 0 0 .35rem; }
.card p{ color: var(--txt-muted); margin: 0; }

/* Card única de ancho completo */
.card-full {
  width: 90%;
  margin: 0 auto;
  max-width: 1200px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 48px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.card-full h3 {
  font-size: var(--fs-h2);
  margin-bottom: .5rem;
}

.card-full p {
  color: var(--txt-muted);
  font-size: 1rem;
  max-width: 70ch;
  margin: 0 auto;
}


/* --------- Opciones / Íconos --------- */
.options .specs{
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 980px){ .options .specs{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .options .specs{ grid-template-columns: 1fr; } }

.spec{
  text-align: center;
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.spec h4{ margin: .25rem 0 .25rem; font-size: 0.95rem; }
.spec p{ margin: 0; color: var(--txt-muted); font-size: var(--fs-small); }

/* --------- Portafolio simple (grid) --------- */
.portfolio .grid-photos{
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.portfolio .grid-photos img{
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #1c191b;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
@media (max-width: 980px){ .portfolio .grid-photos{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .portfolio .grid-photos{ grid-template-columns: 1fr; } }

/* --------- FAQ con <details> --------- */
.faq .list{ display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
details.faq-item{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0; overflow: hidden;
}
details.faq-item > summary{
  list-style: none; cursor: pointer;
  padding: 16px 18px; font-weight: 700; color: #fff;
}
details.faq-item > summary::-webkit-details-marker{ display: none; }
details.faq-item[open] > summary{ background: rgba(255,255,255,.04); }
.faq-item .answer{
  padding: 0 18px 16px; color: var(--txt-muted); border-top: 1px solid var(--border);
}

/* --------- CTA final --------- */
.cta-final{
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-final h3{ font-size: var(--fs-h2); margin: 0 0 .6rem; }

/* --------- Formulario --------- */
.contact-form{
  display: grid; gap: var(--gap); max-width: 860px; margin: 0 auto;
}
.contact-form .row{
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){ .contact-form .row{ grid-template-columns: 1fr; } }

.contact-form input,
.contact-form select,
.contact-form textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #2b2629;
  color: #fff;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color: #bfbfc4; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color: #6a5a61;
  background: #2f2a2d;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.form-msg{ min-height: 1.1rem; font-size: var(--fs-small); color: var(--txt-muted); margin-top: -.25rem; }

/* --------- Footer --------- */
.footer{
  border-top: 1px solid var(--border);
  padding: 22px 0;
  color: var(--txt-muted);
  text-align: center;
}
.footer a{ color: var(--txt-muted); }
.footer a:hover{ color: #fff; }

/* --------- WhatsApp flotante (discreto) --------- */
.wa-float{
  position: fixed;
  right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .75rem;                /* más chico */
  border-radius: 999px;
  background: #25D366;
  color: #0d291a;
  font-weight: 800; font-size: .9rem;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  z-index: 9999; transform: translateZ(0);
  transition: transform .15s ease, filter .15s ease;
}
.wa-float:hover{ transform: translateY(-2px); }

/* --------- Utilidades --------- */
.center{ text-align: center; }
.muted{ color: var(--txt-muted); }
.round{ border-radius: var(--radius); }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* 1) <= 980px: centrar el párrafo del hero */
@media (max-width: 980px){
  .hero__copy p{
    text-align: center;
    margin-inline: auto;   /* centra el bloque */
  }
}

@media (max-width: 515px){
  .header .nav .btn{
    display: none !important;
  }
}