/*=========================================================
  RECIEL · PÁGINAS SUELTAS
  ---------------------------------------------------------
  Gracias (tras enviar la cotización) y política de
  privacidad. Una sola hoja, sin Bootstrap ni iconos en
  fuente: ver includes/paginas_simples.php.
=========================================================*/

:root{
    --pg-tinta:#0c1320;
    --pg-noche:#070b12;
    --pg-texto:#1d2736;
    --pg-suave:#5a6980;
    --pg-borde:#e4eaf1;
    --pg-fondo:#f4f6f9;
    --pg-ok:#0d6d47;
    --pg-ok-bg:#e6f4ee;
    --pg-titulo:"Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --pg-cuerpo:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; }

body{
    margin:0;
    font-family:var(--pg-cuerpo);
    font-size:16px;
    line-height:1.6;
    color:var(--pg-texto);
    background:#fff;
    -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

:focus-visible{
    outline:2px solid #f5a623;
    outline-offset:2px;
}

.pg-contenedor{
    width:100%;
    max-width:1160px;
    margin:0 auto;
    padding:0 20px;
}

/* --- Botones ----------------------------------------------- */

.pg-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font:700 15px/1 var(--pg-titulo);
    padding:14px 20px;
    border-radius:10px;
    border:0;
    cursor:pointer;
    text-align:center;
    text-decoration:none;
    transition:background .15s ease;
}

.pg-btn--oscuro{ background:var(--pg-tinta); color:#fff; }
.pg-btn--oscuro:hover{ background:#22304a; }

.pg-btn--wa{ background:#1d9e50; color:#fff; }
.pg-btn--wa:hover{ background:#157f3f; }

.pg-btn--sm{ padding:10px 14px; font-size:14px; }

/* --- Barra superior ---------------------------------------- */

.pg-top{
    background:#fff;
    border-bottom:1px solid var(--pg-borde);
}

.pg-top .pg-contenedor{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:64px;
}

.pg-logo img{ height:26px; width:auto; }

.pg-top__acciones{ display:flex; align-items:center; gap:10px; }

.pg-tel{
    font-weight:600;
    font-size:15px;
    text-decoration:none;
    color:var(--pg-tinta);
    margin-right:6px;
}

/* --- Pie --------------------------------------------------- */

.pg-pie{
    padding:26px 0;
    font-size:13.5px;
    color:rgba(255,255,255,.55);
    background:var(--pg-noche);
}

.pg-pie .pg-contenedor{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:8px 22px;
}

.pg-pie a{ color:rgba(255,255,255,.82); }

/* --- Gracias ----------------------------------------------- */

.pg-simple{
    min-height:calc(100vh - 150px);
    display:grid;
    place-items:center;
    padding:48px 20px;
    background:var(--pg-fondo);
}

.pg-caja{
    width:100%;
    max-width:560px;
    padding:38px 34px;
    text-align:center;
    background:#fff;
    border:1px solid var(--pg-borde);
    border-radius:16px;
}

.pg-caja__icono{
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    margin:0 auto 16px;
    border-radius:50%;
    font-size:28px;
    font-weight:800;
    color:var(--pg-ok);
    background:var(--pg-ok-bg);
}

.pg-caja h1{ margin:0 0 10px; font:800 26px/1.2 var(--pg-titulo); color:var(--pg-tinta); }
.pg-caja p{ margin:0 0 22px; color:var(--pg-suave); }

.pg-caja__botones{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

/* --- Texto legal ------------------------------------------- */

.pg-legal{ max-width:780px; margin:0 auto; padding:48px 20px 70px; }
.pg-legal h1{ margin:0 0 6px; font:800 32px/1.2 var(--pg-titulo); color:var(--pg-tinta); }
.pg-legal h2{ margin:30px 0 8px; font:700 20px/1.3 var(--pg-titulo); color:var(--pg-tinta); }
.pg-legal p, .pg-legal li{ color:#3b4a63; }
.pg-legal__fecha{ color:var(--pg-suave); font-size:14px; margin:0 0 26px; }

/* --- Angosto ----------------------------------------------- */

@media (max-width:860px){
    .pg-tel, .pg-top__wa{ display:none; }
}

@media (max-width:480px){
    .pg-caja{ padding:30px 22px; }
}

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

/* --- Tienda: enlaces de la barra, botones y pie legal ------ */

.pg-top__enlace{
    font-weight:600;
    font-size:15px;
    text-decoration:none;
    color:var(--pg-tinta);
    padding:8px 6px;
}

.pg-top__enlace:hover{ text-decoration:underline; }

.pg-top__cot span{
    display:inline-grid;
    place-items:center;
    min-width:22px;
    height:22px;
    padding:0 6px;
    margin-left:4px;
    border-radius:11px;
    background:#ff6a00;
    color:#fff;
    font-size:12.5px;
    font-weight:800;
}

.pg-btn--marca{ background:#ff6a00; color:#fff; }
.pg-btn--marca:hover{ background:#e05d00; }

.pg-btn--claro{ background:#eef2f6; color:var(--pg-tinta); }
.pg-btn--claro:hover{ background:#e1e7ee; }

.pg-oculto{
    position:absolute !important;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

.pg-pie__libro{ font-weight:700; }

@media (max-width: 560px){
    .pg-tel{ display:none; }
    .pg-top__enlace{ font-size:14px; padding:6px 2px; }
}