/* ==================================================================
   De Un Solo — hoja de estilo única.
   Escala de espaciado: 4 8 12 16 24 32 48 64 96 128. Nada fuera de ahí.
   Un solo acento (bermellón) + neutros derivados del mismo tono cálido.
   Dos familias: Bricolage Grotesque (display) + la del sistema (texto).
   ================================================================== */

:root {
  /* espaciado */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; --e10: 128px;

  /* color */
  --papel:     #F7F4EF;
  --papel-alt: #EFEAE1;
  --tinta:     #16130F;
  --tinta-sub: #5F594F;
  --linea:     #E0D9CD;
  --acento:      #C93F17;
  --acento-osc:  #A63212;   /* mismo tono, menos luz — para hover */
  --acento-piel: #FBEDE7;   /* mismo tono, mucha luz — para fondos */

  /* tipografía */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radio: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--e5); }

h1, h2, h3, .marca, .precio-num, .paso-n {
  font-family: var(--display);
  letter-spacing: -.028em;
  line-height: 1.05;
}

.saltar {
  position: absolute; left: -9999px;
  background: var(--tinta); color: var(--papel);
  padding: var(--e3) var(--e4); z-index: 10;
}
.saltar:focus { left: var(--e4); top: var(--e4); }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

/* ---------------- botones ---------------- */
.btn {
  display: inline-block;
  font-family: var(--texto);
  font-size: 17px; font-weight: 600;
  padding: var(--e4) var(--e6);
  border-radius: var(--radio);
  text-decoration: none;
  border: none; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.btn-primario { background: var(--acento); color: #fff; }
.btn-primario:hover { background: var(--acento-osc); }
.btn-primario:active { transform: translateY(1px); }
.btn-invertido { background: var(--papel); color: var(--tinta); }
.btn-invertido:hover { background: #fff; }
.btn-ancho { display: block; text-align: center; width: 100%; }

/* ---------------- nav ---------------- */
.nav { position: sticky; top: 0; z-index: 5;
       background: color-mix(in srgb, var(--papel) 88%, transparent);
       backdrop-filter: blur(10px); }
.nav-in { display: flex; justify-content: space-between; align-items: center;
          padding-top: var(--e4); padding-bottom: var(--e4); }
.marca { font-size: 19px; font-weight: 800; }
.nav-cta { font-size: 15px; font-weight: 600; color: var(--acento); text-decoration: none; }
.nav-cta:hover { color: var(--acento-osc); }

/* ---------------- hero ---------------- */
.hero { padding: var(--e9) 0 var(--e8); }
.kicker { font-size: 14px; font-weight: 600; color: var(--acento);
          letter-spacing: .04em; margin-bottom: var(--e5); }
h1 { font-size: clamp(46px, 9.5vw, 104px); font-weight: 800; letter-spacing: -.04em; }
.bajada { font-size: clamp(18px, 2.2vw, 21px); color: var(--tinta-sub);
          max-width: 46ch; margin-top: var(--e5); }
.hero .btn { margin-top: var(--e7); }
.micro { font-size: 14px; color: var(--tinta-sub); margin-top: var(--e3); }
.micro.centro { text-align: center; }

/* ---------------- encabezados de sección ---------------- */
h2 { font-size: clamp(30px, 4.6vw, 46px); font-weight: 800; }
.seccion-sub { color: var(--tinta-sub); max-width: 52ch;
               margin-top: var(--e3); margin-bottom: var(--e7); }

/* ---------------- probador ---------------- */
.probador { padding: var(--e9) 0; background: var(--papel-alt); }
.pb { display: grid; grid-template-columns: 340px 1fr; gap: var(--e7); align-items: start; }

.pb-form { display: flex; flex-direction: column; gap: var(--e5); }
.campo { display: flex; flex-direction: column; gap: var(--e2); border: none; }
.campo label, .campo legend { font-size: 14px; font-weight: 600; color: var(--tinta-sub); padding: 0; }
.campo input {
  font-family: var(--texto); font-size: 16px; color: var(--tinta);
  background: var(--papel); border: none; border-radius: var(--radio);
  padding: var(--e3) var(--e4);
  box-shadow: inset 0 0 0 1.5px var(--linea);
}
.campo input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--acento); }
.campo input::placeholder { color: #A79E90; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }

.tipos { display: flex; flex-direction: column; gap: var(--e2); }
.tipo {
  text-align: left; font-family: var(--texto); cursor: pointer;
  background: var(--papel); border: none; border-radius: var(--radio);
  padding: var(--e3) var(--e4); box-shadow: inset 0 0 0 1.5px var(--linea);
  transition: box-shadow .15s ease, background-color .15s ease;
}
.tipo b { display: block; font-size: 15px; font-weight: 600; color: var(--tinta); }
.tipo span { display: block; font-size: 13px; color: var(--tinta-sub); margin-top: var(--e1); }
.tipo:hover { box-shadow: inset 0 0 0 1.5px #C8BFB0; }
.tipo[aria-checked="true"] { background: var(--acento-piel); box-shadow: inset 0 0 0 2px var(--acento); }

.colores { display: flex; gap: var(--e3); flex-wrap: wrap; }
.color {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 2px var(--papel-alt), 0 0 0 2px transparent;
  transition: box-shadow .15s ease;
}
.color[aria-checked="true"] { box-shadow: 0 0 0 3px var(--papel-alt), 0 0 0 5px var(--tinta); }

/* vista previa */
.pb-vista { position: sticky; top: 88px; }
.vista-barra { display: flex; justify-content: space-between; align-items: center;
               gap: var(--e4); margin-bottom: var(--e3); }
.vista-url { font-size: 13px; color: var(--tinta-sub); font-family: ui-monospace, monospace;
             background: var(--papel); border-radius: 999px; padding: var(--e2) var(--e4);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vista-disp { display: flex; gap: var(--e1); background: var(--papel);
              border-radius: 999px; padding: var(--e1); }
.disp { font-family: var(--texto); font-size: 13px; font-weight: 600; color: var(--tinta-sub);
        background: none; border: none; border-radius: 999px;
        padding: var(--e2) var(--e3); cursor: pointer; }
.disp.on { background: var(--tinta); color: var(--papel); }

.vista-marco { background: var(--papel); border-radius: var(--radio); overflow: hidden;
               height: 620px; margin-bottom: var(--e4); display: flex; justify-content: center; }
.vista-marco iframe { width: 100%; height: 100%; border: none; display: block;
                      transition: width .25s ease; background: #fff; }
.vista-marco.celu iframe { width: 390px; max-width: 100%; }

/* ---------------- precio ---------------- */
.precio { padding: var(--e9) 0; }
.tarjeta-precio { background: var(--tinta); color: var(--papel);
                  border-radius: var(--radio); padding: var(--e7);
                  max-width: 520px; margin-top: var(--e7); }
.precio-num { font-size: clamp(56px, 10vw, 88px); font-weight: 800; line-height: 1; }
.precio-nota { color: rgba(247,244,239,.66); font-size: 16px; margin-top: var(--e2); }
.incluye { list-style: none; margin: var(--e6) 0; display: flex; flex-direction: column; gap: var(--e3); }
.incluye li { position: relative; padding-left: var(--e5); font-size: 16px; }
.incluye li::before { content: ""; position: absolute; left: 0; top: 10px;
                      width: 8px; height: 8px; border-radius: 50%; background: var(--acento); }
.tarjeta-precio .btn-primario { background: var(--acento); }
.tarjeta-precio .btn-primario:hover { background: var(--acento-osc); }

.honesto { margin-top: var(--e8); max-width: 62ch; }
.honesto h3 { font-size: 22px; font-weight: 800; }
.honesto > p { color: var(--tinta-sub); margin-top: var(--e2); }
.honesto ul { list-style: none; margin-top: var(--e5); display: flex; flex-direction: column; gap: var(--e4); }
.honesto li { color: var(--tinta-sub); padding-left: var(--e5); border-left: 2px solid var(--linea); }
.honesto strong { color: var(--tinta); }

/* ---------------- pasos ---------------- */
.pasos { padding: var(--e9) 0; background: var(--papel-alt); }
.lista-pasos { list-style: none; margin-top: var(--e7);
               display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e6); }
.paso-n { display: block; font-size: 15px; font-weight: 700; color: var(--acento); margin-bottom: var(--e3); }
.lista-pasos h3 { font-size: 21px; font-weight: 700; }
.lista-pasos p { color: var(--tinta-sub); font-size: 16px; margin-top: var(--e2); }

/* ---------------- faq ---------------- */
.faq { padding: var(--e9) 0; }
.faq details { border-top: 1px solid var(--linea); padding: var(--e5) 0; max-width: 68ch; }
.faq details:last-of-type { border-bottom: 1px solid var(--linea); }
.faq summary { font-size: 19px; font-weight: 600; cursor: pointer; list-style: none;
               display: flex; justify-content: space-between; align-items: center; gap: var(--e4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; color: var(--acento); flex-shrink: 0; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--tinta-sub); margin-top: var(--e3); }
.faq h2 { margin-bottom: var(--e6); }

/* ---------------- cierre ---------------- */
.cierre { background: var(--tinta); color: var(--papel); padding: var(--e9) 0; text-align: center; }
.cierre p { color: rgba(247,244,239,.66); margin-top: var(--e3); }
.cierre .btn { margin-top: var(--e6); }

/* ---------------- pie ---------------- */
.pie { padding: var(--e6) 0; }
.pie-in { display: flex; justify-content: space-between; align-items: center;
          gap: var(--e4); font-size: 14px; color: var(--tinta-sub); flex-wrap: wrap; }
.pie a { color: var(--acento); text-decoration: none; font-weight: 600; }

.h-inline { font-variant-numeric: tabular-nums; }

/* ==================================================================
   Móvil — una sola columna, el preview debajo de los controles.
   ================================================================== */
@media (max-width: 900px) {
  .pb { grid-template-columns: 1fr; gap: var(--e6); }
  .pb-vista { position: static; }
  .vista-marco { height: 480px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: var(--e8) 0 var(--e7); }
  .probador, .precio, .pasos, .faq, .cierre { padding: var(--e8) 0; }
  .tarjeta-precio { padding: var(--e6); }
  .dos { grid-template-columns: 1fr; }
  .hero .btn, .cierre .btn { display: block; text-align: center; }
  .vista-disp { flex-shrink: 0; }
}

/* ==================================================================
   Planes (3 sep 2026). Dos tarjetas sobre la misma escala y el mismo
   acento. Solo la destacada lleva el boton primario: un primario a la
   vista por pantalla. La otra usa el secundario (borde del mismo tono).
   ================================================================== */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: var(--e5); margin-top: var(--e7); align-items: stretch; }
.plan { background: var(--papel-alt); border-radius: var(--radio); padding: var(--e7);
        display: flex; flex-direction: column; }
.plan .incluye { flex: 1; }
.plan-destacado { background: var(--tinta); color: var(--papel); }
/* .precio-nota nacio para la tarjeta oscura (color papel al 66%): sobre la
   tarjeta clara desaparecia — se vio en la captura, no en el codigo. */
.plan .precio-nota { color: var(--tinta-sub); }
.plan-destacado .precio-nota { color: rgba(247,244,239,.66); }
.plan-nombre { font-size: 15px; font-weight: 600; color: var(--tinta-sub);
               display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.plan-destacado .plan-nombre { color: rgba(247,244,239,.78); }
.plan-tag { font-size: 13px; font-weight: 700; color: var(--acento);
            background: var(--acento-piel); border-radius: 999px; padding: var(--e1) var(--e3); }
.plan .precio-num { margin-top: var(--e3); }
.precio-mes { font-size: .38em; font-weight: 600; letter-spacing: 0; margin-left: var(--e1);
              color: var(--tinta-sub); }
.plan-destacado .precio-mes { color: rgba(247,244,239,.66); }
.btn-secundario { background: transparent; color: var(--acento);
                  box-shadow: inset 0 0 0 2px var(--acento); }
.btn-secundario:hover { background: var(--acento-piel); }
.plan[aria-checked="true"] { box-shadow: 0 0 0 3px var(--acento); }
.precio .micro { margin-top: var(--e4); }

/* ---------------- ejemplos reales ---------------- */
.ejemplos { padding: var(--e9) 0; background: var(--papel-alt); }
.ej-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
           gap: var(--e5); margin-top: var(--e7); }
.ej { display: flex; flex-direction: column; gap: var(--e2); text-decoration: none; color: var(--tinta);
      background: var(--papel); border-radius: var(--radio); padding: var(--e6);
      transition: transform .15s ease, box-shadow .15s ease; }
.ej:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(22,19,15,.08); }
.ej-rubro { font-size: 14px; font-weight: 600; color: var(--acento); }
.ej-nombre { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.028em; }
.ej-nota { font-size: 16px; color: var(--tinta-sub); flex: 1; }
.ej-link { font-size: 14px; font-family: ui-monospace, monospace; color: var(--tinta-sub); margin-top: var(--e3); }

/* ---------------- cinta de vista previa ---------------- */
.cinta { background: var(--acento); color: #fff; font-size: 14px; font-weight: 600;
         text-align: center; padding: var(--e2) var(--e4); }

@media (max-width: 640px) {
  .plan { padding: var(--e6); }
  .ejemplos { padding: var(--e8) 0; }
}