/* La página de presentación del Facturador (templates/publico/presentacion.html).
   Sin dependencias externas: la política de contenido solo deja cargar lo del
   propio sitio. Los colores son los del símbolo de Halbora (ver app.css). */

:root {
  --azul: #0b2338;
  --azul-2: #12314d;
  --verde: #20a090;
  --marca: #18776b;
  --marca-oscura: #125950;
  --marca-suave: #d1f0ec;
  --fondo: #f4f7f8;
  --superficie: #ffffff;
  --alterna: #eaf3f2;
  --borde: #dde6ea;
  --texto: #0b2338;
  --suave: #4f6377;
  --exito: #1f7a4d;
  --exito-fondo: #e0f3e8;
  --sombra: 0 1px 2px rgba(11, 35, 56, .06), 0 12px 32px rgba(11, 35, 56, .10);
  --radio: 16px;
  --letra: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--letra); font-size: 16px; line-height: 1.6; }
img { max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
a { color: var(--marca); }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }
.icono { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.saltar { position: absolute; left: -10000px; top: 0; z-index: 100; background: var(--superficie); padding: .6rem 1rem; font-weight: 600; }
.saltar:focus { left: 0; }

.envoltura { width: min(1120px, 100% - 32px); margin-inline: auto; }
.estrecha { width: min(820px, 100% - 32px); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .65rem 1.25rem; border: 1.5px solid var(--borde); border-radius: 999px; background: var(--superficie); color: var(--texto); font-weight: 650; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.boton:hover { transform: translateY(-1px); box-shadow: var(--sombra); }
.boton-principal { background: var(--marca); border-color: var(--marca); color: #fff; }
.boton-principal:hover { background: var(--marca-oscura); border-color: var(--marca-oscura); }
.boton.chico { min-height: 38px; padding: .4rem 1rem; font-size: .95rem; }
.boton.grande { min-height: 54px; padding: .8rem 1.75rem; font-size: 1.05rem; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 10; background: rgba(244, 247, 248, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--borde); }
.cabecera-fila { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--azul); text-decoration: none; font-size: 1.3rem; }
.logo .marca-simbolo { height: 2rem; width: auto; }
.logo .marca-nombre { font-weight: 750; letter-spacing: -.02em; }
.logo .marca-producto { font-weight: 500; color: var(--marca); }
.menu { display: flex; gap: 1.5rem; margin-left: auto; }
.menu a { color: var(--suave); font-weight: 550; text-decoration: none; }
.menu a:hover { color: var(--texto); }
.cabecera-acciones { display: flex; align-items: center; gap: 1rem; }
.entrar { color: var(--texto); font-weight: 600; text-decoration: none; }
@media (max-width: 900px) { .menu { display: none; } .cabecera-acciones { margin-left: auto; } }

/* Héroe */
.heroe { position: relative; overflow: hidden; padding: 72px 0 88px; background:
  radial-gradient(900px 420px at 85% 10%, rgba(32, 160, 144, .16), transparent 70%),
  radial-gradient(700px 380px at 0% 100%, rgba(11, 35, 56, .07), transparent 70%); }
.heroe-fila { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.etiqueta { display: inline-block; margin-bottom: 14px; color: var(--marca); font-size: .8rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.heroe h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 800; }
.heroe h1 em { font-style: normal; color: var(--marca); }
.bajada { margin-top: 20px; max-width: 34em; color: var(--suave); font-size: 1.15rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sellos { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--suave); font-size: .95rem; }
.sellos .icono { color: var(--marca); margin-right: .25rem; }

/* La factura de muestra */
.muestra { background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; box-shadow: 0 30px 60px rgba(11, 35, 56, .16), 0 2px 6px rgba(11, 35, 56, .06); transform: rotate(1.2deg); }
.muestra-barra { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--borde); }
.muestra-barra span { width: 10px; height: 10px; border-radius: 50%; background: var(--borde); }
.muestra-cuerpo { padding: 22px 24px 24px; }
.muestra-encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.muestra-numero { font-weight: 750; font-size: 1.1rem; }
.muestra-cliente { color: var(--suave); font-size: .92rem; }
.pastilla { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.pastilla-ok { background: var(--exito-fondo); color: var(--exito); }
.muestra-tabla { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: .95rem; }
.muestra-tabla td { padding: 7px 0; border-bottom: 1px dashed var(--borde); }
.muestra-tabla td:last-child { text-align: right; }
.muestra-tabla .total td { border-bottom: 0; padding-top: 10px; font-weight: 800; font-size: 1.1rem; }
.muestra-cufe { margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: var(--fondo); color: var(--suave); font-family: var(--mono); font-size: .8rem; }
.muestra-cufe span { color: var(--texto); font-weight: 700; margin-right: .4rem; }
.recorrido { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.recorrido li { position: relative; display: flex; justify-content: space-between; padding-left: 26px; font-size: .9rem; }
.recorrido li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px var(--marca-suave); }
.recorrido li span { color: var(--suave); }

@media (max-width: 900px) {
  .heroe { padding: 44px 0 56px; }
  .heroe-fila { grid-template-columns: 1fr; gap: 40px; }
  .muestra { transform: none; }
}

/* Secciones */
.seccion { padding: 88px 0; }
.seccion h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; max-width: 22em; }
.seccion-alterna { background: var(--alterna); }
.intro { margin-top: 16px; color: var(--suave); font-size: 1.08rem; max-width: 40em; }

.dolores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.dolor { padding: 24px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 1px 2px rgba(11, 35, 56, .04); }
.dolor p { color: var(--suave); }
.queja { margin-bottom: 12px; color: var(--texto) !important; font-size: 1.12rem; font-weight: 750; line-height: 1.35; }
@media (max-width: 960px) { .dolores { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .dolores { grid-template-columns: 1fr; } }

.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 40px 0 0; padding: 0; list-style: none; counter-reset: paso; }
.paso { padding: 24px; background: var(--superficie); border-radius: var(--radio); border: 1px solid var(--borde); }
.paso-numero { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 12px; background: var(--azul); color: #fff; font-weight: 800; }
.paso h3 { font-size: 1.1rem; margin-bottom: 8px; }
.paso p { color: var(--suave); font-size: .97rem; }
@media (max-width: 960px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pasos { grid-template-columns: 1fr; } }

.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.funcion { padding: 22px 24px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.funcion > .icono { width: 42px; height: 42px; padding: 9px; margin-bottom: 12px; border-radius: 12px; background: var(--marca-suave); color: var(--marca-oscura); }
.funcion h3 { font-size: 1.08rem; margin-bottom: 6px; }
.funcion p { color: var(--suave); font-size: .96rem; }
@media (max-width: 960px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .rejilla { grid-template-columns: 1fr; } }

.seccion-oscura { background: linear-gradient(135deg, var(--azul) 0%, var(--azul-2) 100%); color: #e8f1f5; }
.seccion-oscura h2 { color: #fff; }
.seccion-oscura .etiqueta { color: #7fd8c8; }
.seccion-oscura .intro { color: #b9cad6; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lista-segura { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.lista-segura li { display: flex; gap: .75rem; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .10); }
.lista-segura .icono { color: #7fd8c8; margin-top: .15em; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; gap: 28px; } }

.preguntas { margin-top: 32px; display: grid; gap: 12px; }
.preguntas details { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 0 20px; }
.preguntas summary { cursor: pointer; list-style: none; padding: 18px 28px 18px 0; position: relative; font-weight: 700; font-size: 1.05rem; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--marca); font-size: 1.5rem; font-weight: 500; }
.preguntas details[open] summary::after { content: "−"; }
.preguntas details p { padding: 0 0 18px; color: var(--suave); }

.seccion-ecosistema { padding-top: 24px; }
.productos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }
.producto { display: block; padding: 26px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); color: var(--texto); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.producto:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--verde); }
.producto h3 { font-size: 1.2rem; margin-bottom: 8px; }
.producto p { color: var(--suave); }
.producto .ir { display: inline-block; margin-top: 14px; color: var(--marca); font-weight: 700; }
@media (max-width: 720px) { .productos { grid-template-columns: 1fr; } }

.cierre { padding: 72px 0; background: linear-gradient(120deg, var(--marca-oscura), var(--marca) 60%, var(--verde)); color: #fff; }
.cierre-fila { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cierre h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 800; }
.cierre p { margin-top: 8px; color: #dff5f0; font-size: 1.08rem; }
.cierre .boton-principal { background: #fff; border-color: #fff; color: var(--marca-oscura); }
.cierre .boton-principal:hover { background: #f1fbf9; }

.pie { padding: 36px 0 44px; border-top: 1px solid var(--borde); color: var(--suave); font-size: .95rem; }
.pie-fila { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.pie nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.pie nav a { color: var(--suave); text-decoration: none; }
.pie nav a:hover { color: var(--texto); }
.pie p { width: 100%; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } .muestra { transform: none; } }