/* ==========================================================================
   UEP · Sitio público (header, hero, guías, footer)
   Depende de los tokens definidos en app.css (cargar app.css primero).
   ========================================================================== */

/* ---- Header ---- */
.site-header{ position:sticky; top:0; z-index:30; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid var(--line); }
.site-header__inner{ max-width:1140px; margin:0 auto; padding:.7rem 1.2rem; display:flex; align-items:center; gap:1rem; }
.site-logo{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--brand-900); }
.site-logo__mark{ width:40px; height:40px; border-radius:10px; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:1rem; }
.site-logo__name{ font-weight:700; line-height:1.1; }
.site-logo__name small{ display:block; font-weight:500; color:var(--muted); font-size:.72rem; }
.site-nav{ margin-left:auto; display:flex; gap:.3rem; align-items:center; }
.site-nav a{ text-decoration:none; color:var(--brand-800); font-weight:600; font-size:.94rem;
  padding:.5rem .8rem; border-radius:8px; }
.site-nav a:hover{ background:var(--brand-050); }
.site-nav a.is-active{ background:var(--brand-050); color:var(--brand); }

/* ---- Contenedor ---- */
.container{ max-width:1140px; margin:0 auto; padding:0 1.2rem; }
.section{ padding:3rem 0; }
.section__head{ text-align:center; max-width:680px; margin:0 auto 2rem; }
.section__head h2{ font-size:1.7rem; }
.section__head p{ color:var(--muted); }

/* ---- Hero ---- */
.hero{ padding:4rem 0 3rem; text-align:center;
  background:radial-gradient(1000px 500px at 50% -10%, var(--brand-050), #fff 70%); }
.hero h1{ font-size:2.3rem; max-width:820px; margin:0 auto .8rem; }
.hero p{ font-size:1.12rem; color:var(--muted); max-width:660px; margin:0 auto 1.6rem; }
.hero__cta{ display:inline-flex; gap:.7rem; flex-wrap:wrap; justify-content:center; }

/* ---- Grilla de guías (3 / 2 / 1) ---- */
.guias-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; }
@media (max-width:900px){ .guias-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .guias-grid{ grid-template-columns:1fr; } }

.guia-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .15s, transform .15s; }
.guia-card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.guia-card__logo{ height:132px; background:#fff; border-bottom:1px solid var(--line);
  display:grid; place-items:center; padding:1rem; }
.guia-card__logo img{ max-height:100%; max-width:100%; object-fit:contain; }
.guia-card__logo--ph{ background:var(--brand-050); color:var(--brand); font-weight:800; font-size:2rem; }
.guia-card__body{ padding:1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.guia-card__body h3{ font-size:1.1rem; margin:0; }
.guia-card__body p{ color:var(--muted); font-size:.92rem; margin:0; flex:1; }
.guia-card__star{ display:inline-flex; align-items:center; gap:.3rem; align-self:flex-start;
  background:var(--warn-bg); color:#8a6412; font-size:.72rem; font-weight:700; padding:.2rem .5rem; border-radius:999px; }
.guia-card__actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.4rem; }
.guia-card__actions .btn{ padding:.5rem .85rem; font-size:.9rem; }

/* ---- Estado vacío ---- */
.vacio{ text-align:center; padding:3.5rem 1rem; color:var(--muted);
  border:1px dashed var(--line); border-radius:var(--radius); background:#fff; }

/* ---- Footer ---- */
.site-footer{ background:var(--brand-900); color:#c7d6e6; margin-top:2rem; }
.site-footer__inner{ max-width:1140px; margin:0 auto; padding:2.2rem 1.2rem; display:flex;
  gap:1.5rem; justify-content:space-between; flex-wrap:wrap; }
.site-footer__brand{ font-weight:700; color:#fff; }
.site-footer small{ color:#8ba3bc; }
.site-footer a{ color:#c7d6e6; }

/* ==========================================================================
   Fase 3 · Contenido de páginas + FAQ (acordeón)
   ========================================================================== */

/* ---- Contenido enriquecido de páginas ---- */
.page-content{ max-width:840px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:2.2rem 2.4rem;
  color:var(--ink); font-size:1.02rem; line-height:1.7; }
.page-content > :first-child{ margin-top:0; }
@media (max-width:560px){ .page-content{ padding:1.4rem 1.3rem; } }
.page-content h2{ font-size:1.4rem; margin:1.8rem 0 .6rem; }
.page-content h3{ font-size:1.18rem; margin:1.4rem 0 .5rem; }
.page-content h4{ font-size:1.03rem; margin:1.2rem 0 .5rem; }
.page-content p{ margin:0 0 1rem; }
.page-content ul, .page-content ol{ margin:0 0 1rem 1.3rem; }
.page-content li{ margin:.25rem 0; }
.page-content a{ color:var(--brand-600); text-decoration:underline; }
.page-content blockquote{ margin:1.2rem 0; padding:.6rem 1rem; border-left:4px solid var(--brand-050);
  background:#f8fafc; color:var(--muted); border-radius:0 8px 8px 0; }

/* ---- Acordeón de FAQ (nativo, accesible) ---- */
.faq-acc{ display:flex; flex-direction:column; gap:.7rem; }
.faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.faq-item > summary{ list-style:none; cursor:pointer; padding:1rem 1.2rem; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; font-weight:600; color:var(--brand-900); }
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary:hover{ background:var(--brand-050); }
.faq-item__ico{ transition:transform .2s; color:var(--brand-600); flex:0 0 auto; }
.faq-item[open] > summary .faq-item__ico{ transform:rotate(180deg); }
.faq-item__body{ padding:0 1.2rem 1.15rem; color:var(--ink); line-height:1.65; }
.faq-item__body p{ margin:.2rem 0 .8rem; }
.faq-item__body a{ color:var(--brand-600); text-decoration:underline; }
.faq-item > summary:focus-visible{ outline:3px solid rgba(29,90,140,.45); outline-offset:-3px; }

/* ---- Bloque FAQ en portada ---- */
.home-faq{ max-width:820px; margin:0 auto; }

/* ==========================================================================
   Fase 4 · Contacto + banner de cookies
   ========================================================================== */
.contacto-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:1.6rem; align-items:start; }
@media (max-width:800px){ .contacto-grid{ grid-template-columns:1fr; } }
.contacto-info{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:1.5rem; }
.contacto-info h2{ font-size:1.1rem; margin:0 0 1rem; }
.contacto-info p{ margin:.4rem 0; color:var(--ink); display:flex; align-items:center; gap:.6rem; }
.contacto-info i{ color:var(--brand-600); }
.contacto-info a{ color:var(--brand-600); }

/* Honeypot: oculto para personas, visible para bots que ignoran el CSS. */
.hp{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

/* Banner de cookies */
.cookie-consent{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:60; margin:0 auto; max-width:960px;
  background:var(--brand-900); color:#dfe9f3; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1rem 1.2rem; display:none; align-items:center; gap:1rem; flex-wrap:wrap; }
.cookie-consent.is-open{ display:flex; }
.cookie-consent__text{ flex:1; min-width:220px; font-size:.9rem; }
.cookie-consent a{ color:#fff; text-decoration:underline; }
.cookie-consent .btn{ flex:0 0 auto; }

/* ==========================================================================
   Fase 6 · Contacto (aviso + consentimiento) y cookies aceptar/rechazar
   ========================================================================== */
.aviso-no-vende{ display:flex; align-items:flex-start; gap:.6rem; background:var(--brand-050);
  border:1px solid #d4e3f2; color:var(--brand-900); border-radius:var(--radius-sm);
  padding:.85rem 1rem; margin-bottom:1.4rem; font-size:.92rem; }
.aviso-no-vende i{ color:var(--brand-600); margin-top:.15rem; }
.consent{ display:flex; align-items:flex-start; gap:.55rem; font-size:.88rem; color:var(--ink); margin-top:.4rem; }
.consent input{ margin-top:.2rem; flex:0 0 auto; }
.consent a{ color:var(--brand-600); text-decoration:underline; }
.cookie-consent__actions{ display:flex; gap:.5rem; flex:0 0 auto; }

/* ==========================================================================
   Fase 6.2 · Rediseño del formulario de contacto
   ========================================================================== */
.contacto-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:1.6rem; align-items:stretch; }
@media (max-width:820px){ .contacto-grid{ grid-template-columns:1fr; } }

.aviso-no-vende{ display:flex; gap:.7rem; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-left:4px solid var(--accent); border-radius:var(--radius-sm); padding:.9rem 1.1rem; margin-bottom:1.5rem;
  color:var(--brand-900); font-size:.92rem; box-shadow:var(--shadow-sm); }
.aviso-no-vende i{ color:var(--accent-600); font-size:1.15rem; margin-top:.1rem; }

/* Tarjeta del formulario */
.contacto-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:1.9rem; }
.contacto-card h2{ font-size:1.2rem; margin:0 0 1.3rem; }

/* Campos */
.ctf-field{ margin-bottom:1.05rem; }
.ctf-field label{ display:block; font-size:.85rem; font-weight:600; color:var(--brand-900); margin-bottom:.4rem; }
.ctf{ width:100%; padding:.75rem .9rem; border:1px solid var(--line); border-radius:10px; background:#f8fafc;
  font-family:inherit; font-size:1rem; color:var(--ink); transition:border-color .15s, box-shadow .15s, background .15s; }
.ctf::placeholder{ color:#9aa8b6; }
.ctf:focus{ outline:none; border-color:var(--brand-600); background:#fff; box-shadow:0 0 0 3px rgba(29,90,140,.16); }
textarea.ctf{ min-height:140px; resize:vertical; }
select.ctf{ appearance:none; -webkit-appearance:none; padding-right:2.4rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b6b7b' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; }
.ctf-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .ctf-row{ grid-template-columns:1fr; } }

/* Consentimiento */
.consent{ display:flex; gap:.65rem; align-items:flex-start; background:var(--brand-050); border:1px solid #dbe7f3;
  border-radius:10px; padding:.85rem .95rem; font-size:.86rem; color:var(--ink); margin:.2rem 0 1.2rem; }
.consent input{ margin-top:.15rem; width:1.05rem; height:1.05rem; flex:0 0 auto; accent-color:var(--brand); }
.consent a{ color:var(--brand-600); text-decoration:underline; }
.contacto-submit{ width:100%; padding:.85rem 1rem; font-size:1rem; }

/* Tarjeta lateral con la identidad de marca */
.contacto-side{ background:linear-gradient(160deg, var(--brand-900), var(--brand-800)); color:#dbe7f3;
  border-radius:16px; padding:1.9rem; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.contacto-side h2{ color:#fff; font-size:1.2rem; margin:0 0 1.4rem; }
.contacto-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.15rem; }
.contacto-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.contacto-list .ico{ width:42px; height:42px; flex:0 0 auto; border-radius:12px; background:rgba(255,255,255,.12);
  display:grid; place-items:center; color:#fff; font-size:1.15rem; }
.contacto-list small{ display:block; color:#9fb6cd; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.15rem; }
.contacto-list a, .contacto-list .val{ color:#fff; text-decoration:none; font-weight:600; font-size:.95rem; word-break:break-word; }
.contacto-list a:hover{ text-decoration:underline; }
.contacto-side__legal{ margin-top:auto; padding-top:1.4rem; margin-top:1.6rem; border-top:1px solid rgba(255,255,255,.14);
  color:#9fb6cd; font-size:.82rem; line-height:1.5; }
.contacto-side__legal strong{ color:#eaf1f8; }

/* ==========================================================================
   Marca · logo en header y footer
   ========================================================================== */
.site-logo__img{ height:44px; width:auto; display:block; }
@media (max-width:560px){ .site-logo__img{ height:38px; } }
.site-footer__brandbox{ display:flex; align-items:center; gap:.75rem; }
.site-footer__mark{ width:40px; height:40px; flex:0 0 auto; }