/* ============================================================
   Quercus Arqueología — sistema visual de páginas internas.
   Componentes semánticos sobre los tokens del diseño Lovable.
   ============================================================ */

/* --- Hero de cabecera (imagen + overlay + título) --- */
.q-hero{position:relative;min-height:clamp(360px,52vh,520px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--primary)}
.q-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.q-hero__overlay{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,17,17,.82) 0%,rgba(21,93,14,.45) 45%,rgba(21,93,14,.15) 100%)}
.q-hero__inner{position:relative;z-index:2;width:100%;max-width:72rem;margin:0 auto;
  padding:0 1.5rem 3.25rem}
.q-hero__eyebrow{font-family:Inter,sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .9rem}
.q-hero__title{font-family:"Cormorant Garamond",serif;color:#fff;line-height:1.04;margin:0;
  font-size:clamp(2.4rem,5.5vw,4rem);font-weight:500}
.q-hero__sub{font-family:Inter,sans-serif;color:rgba(255,255,255,.88);font-weight:300;
  font-size:clamp(1rem,1.6vw,1.2rem);max-width:46rem;margin:1rem 0 0;line-height:1.5}

/* --- Estructura --- */
.q-section{padding:clamp(3.5rem,7vw,6rem) 1.5rem}
.q-section--soft{background:var(--secondary)}
.q-section--muted{background:var(--muted)}
.q-wrap{max-width:72rem;margin:0 auto}
.q-wrap--narrow{max-width:48rem;margin:0 auto}
.q-eyebrow{font-family:Inter,sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent);margin:0 0 1.1rem}
.q-h2{font-family:"Cormorant Garamond",serif;color:var(--primary);font-weight:500;line-height:1.1;
  font-size:clamp(1.9rem,3.6vw,2.9rem);margin:0 0 1.5rem}
.q-h3{font-family:"Cormorant Garamond",serif;color:var(--primary);font-weight:500;line-height:1.15;
  font-size:1.5rem;margin:0 0 .6rem}
.q-lead{font-family:Inter,sans-serif;font-size:clamp(1.1rem,1.7vw,1.35rem);font-weight:300;
  line-height:1.55;color:var(--foreground);margin:0 0 1.5rem}
.q-prose p{font-family:Inter,sans-serif;font-size:1.05rem;line-height:1.75;color:rgba(20,17,17,.85);
  margin:0 0 1.15rem}
.q-prose p:last-child{margin-bottom:0}
.q-prose strong{color:var(--primary);font-weight:600}

/* --- Bloque imagen + texto (alternable) --- */
.q-feature{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media(min-width:820px){.q-feature{grid-template-columns:1fr 1fr}
  .q-feature--rev .q-feature__media{order:2}}
.q-feature__media{position:relative}
.q-feature__media img{width:100%;height:100%;max-height:24rem;object-fit:cover;display:block;
  box-shadow:0 18px 40px -24px rgba(20,17,17,.55)}
.q-feature__media::after{content:"";position:absolute;left:-14px;top:-14px;width:64px;height:64px;
  border-top:2px solid var(--accent);border-left:2px solid var(--accent)}

/* --- Tarjetas (grid de servicios / temas) --- */
.q-grid{display:grid;gap:1.5rem}
@media(min-width:640px){.q-grid--2{grid-template-columns:repeat(2,1fr)}
  .q-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.q-grid--3{grid-template-columns:repeat(3,1fr)}}
.q-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);
  overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;text-decoration:none}
.q-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(20,17,17,.5)}
.q-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--muted)}
.q-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.q-card:hover .q-card__media img{transform:scale(1.05)}
.q-card__body{padding:1.5rem 1.5rem 1.7rem}
.q-card__body .q-h3{margin-bottom:.5rem}
.q-card__body p{font-family:Inter,sans-serif;font-size:.97rem;line-height:1.6;
  color:var(--muted-foreground);margin:0}
.q-card__more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-family:Inter,sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:500}

/* --- Acordeón (temas de Arqueología + FAQ) --- */
.q-acc{border:1px solid var(--border);background:var(--card)}
.q-acc details{border-bottom:1px solid var(--border)}
.q-acc details:last-child{border-bottom:none}
.q-acc summary{display:flex;align-items:center;gap:1rem;padding:1.15rem 1.4rem;cursor:pointer;
  list-style:none;font-family:"Cormorant Garamond",serif;font-size:1.3rem;color:var(--primary);
  font-weight:500;transition:background .2s ease}
.q-acc summary::-webkit-details-marker{display:none}
.q-acc summary:hover{background:var(--secondary)}
.q-acc summary .q-acc__ico{margin-left:auto;flex:0 0 auto;width:22px;height:22px;position:relative;
  transition:transform .25s ease}
.q-acc summary .q-acc__ico::before,.q-acc summary .q-acc__ico::after{content:"";position:absolute;
  background:var(--accent);left:50%;top:50%;transform:translate(-50%,-50%)}
.q-acc summary .q-acc__ico::before{width:2px;height:14px}
.q-acc summary .q-acc__ico::after{width:14px;height:2px}
.q-acc details[open] summary .q-acc__ico{transform:rotate(45deg)}
.q-acc__panel{padding:0 1.4rem 1.4rem;display:grid;gap:1.4rem;align-items:start}
.q-acc__panel.has-img{grid-template-columns:1fr}
@media(min-width:760px){.q-acc__panel.has-img{grid-template-columns:200px 1fr}}
.q-acc__panel img{width:100%;object-fit:cover;border:1px solid var(--border)}
.q-acc__panel p{font-family:Inter,sans-serif;font-size:1rem;line-height:1.7;
  color:rgba(20,17,17,.82);margin:0}
/* Panel con varios párrafos y subtítulos (áreas de reconstrucción virtual). */
.q-acc__text{display:grid;gap:.9rem}
.q-acc__resumen{font-weight:500;color:var(--primary)!important}
.q-acc__h{font-family:"Cormorant Garamond",serif;color:var(--primary);font-weight:500;
  font-size:1.25rem;line-height:1.2;margin:.6rem 0 0}
.q-acc__text .q-acc__h:first-child{margin-top:0}
/* La imagen del área no debe estirarse a lo alto del panel desplegado. */
@media(min-width:760px){.q-acc__panel.has-img>img{position:sticky;top:1.4rem;align-self:start}}

/* --- Banda CTA --- */
.q-cta{background:var(--primary);color:var(--primary-foreground);text-align:center;
  padding:clamp(3rem,6vw,5rem) 1.5rem}
.q-cta .q-h2{color:#fff}
.q-cta p{font-family:Inter,sans-serif;font-weight:300;font-size:1.1rem;line-height:1.6;
  color:rgba(255,255,255,.85);max-width:42rem;margin:0 auto 2rem}
.q-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;background:var(--accent);
  color:#3a2400;font-family:Inter,sans-serif;font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;text-decoration:none;transition:background .2s ease,transform .2s ease}
.q-btn:hover{background:#ffa01f;transform:translateY(-2px)}
.q-btn--ghost{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.q-btn--ghost:hover{background:var(--accent);color:#3a2400}

/* --- Lista de bullets con icono --- */
.q-checks{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.85rem}
.q-checks li{position:relative;padding-left:1.7rem;font-family:Inter,sans-serif;font-size:1.02rem;
  line-height:1.55;color:rgba(20,17,17,.85)}
.q-checks li::before{content:"";position:absolute;left:0;top:.55em;width:.55rem;height:.55rem;
  background:var(--accent);transform:rotate(45deg)}

/* --- Datos de contacto + formulario --- */
.q-contact{display:grid;gap:2.5rem}
@media(min-width:860px){.q-contact{grid-template-columns:1fr 1.1fr}}
.q-info{display:grid;gap:1.3rem;align-content:start}
.q-info__row{display:flex;gap:.9rem;align-items:flex-start}
.q-info__row svg{flex:0 0 auto;width:20px;height:20px;color:var(--accent);margin-top:.15rem}
.q-info__row span,.q-info__row a{font-family:Inter,sans-serif;font-size:1.02rem;line-height:1.5;
  color:rgba(20,17,17,.85);text-decoration:none}
.q-info__row a:hover{color:var(--accent)}
.q-info__label{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-foreground);margin-bottom:.15rem}

.q-form{background:var(--card);border:1px solid var(--border);padding:clamp(1.6rem,3vw,2.4rem)}
.q-field{margin-bottom:1.1rem}
.q-field label{display:block;font-family:Inter,sans-serif;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-foreground);margin-bottom:.45rem}
.q-field input,.q-field textarea{width:100%;background:var(--background);border:1px solid var(--input);
  padding:.75rem .9rem;font-family:Inter,sans-serif;font-size:1rem;color:var(--foreground);
  transition:border-color .2s ease}
.q-field input:focus,.q-field textarea:focus{outline:none;border-color:var(--accent)}
.q-field textarea{min-height:140px;resize:vertical}
.q-form__note{font-family:Inter,sans-serif;font-size:.82rem;color:var(--muted-foreground);
  margin:.2rem 0 1.1rem;line-height:1.5}
.q-alert{padding:.9rem 1.1rem;font-family:Inter,sans-serif;font-size:.95rem;margin-bottom:1.2rem}
.q-alert--ok{background:#eef6ec;border:1px solid #155d0e33;color:#155d0e}
.q-alert--err{background:#fdeee6;border:1px solid #f88b0055;color:#9a4a00}

/* utilidad: separación tras hero para que no tape la barra fija */
.q-page{padding-top:4rem}

/* Contacto: rótulo de marca con la tipografía Papyrus (petición del cliente 28-07). */
.q-info .q-papyrus{font-family:var(--font-papyrus)}
.q-info .q-papyrus span{font-family:var(--font-papyrus)}

/* Enlaces legales del pie -------------------------------------------------- */
.q-footer-legal{margin:0 0 .6rem;display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center}
.q-footer-legal a{color:rgba(255,255,255,.62);text-decoration:none;transition:color .2s ease}
.q-footer-legal a:hover{color:var(--accent)}

/* Páginas de textos legales ------------------------------------------------ */
.q-legal{max-width:52rem;margin:0 auto}
.q-legal h2{font-family:"Cormorant Garamond",serif;color:var(--primary);font-weight:500;
  font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.2;margin:2.4rem 0 .9rem}
.q-legal h2:first-child{margin-top:0}
.q-legal h3{font-family:"Cormorant Garamond",serif;color:var(--primary);font-weight:500;
  font-size:1.25rem;margin:1.6rem 0 .6rem}
.q-legal p{font-family:Inter,sans-serif;font-size:1.02rem;line-height:1.75;
  color:rgba(20,17,17,.85);margin:0 0 1rem}
.q-legal ul,.q-legal ol{font-family:Inter,sans-serif;font-size:1.02rem;line-height:1.75;
  color:rgba(20,17,17,.85);margin:0 0 1.2rem;padding-left:1.4rem}
/* El reset de Tailwind quita las viñetas: aquí sí las queremos. */
.q-legal ul{list-style:disc outside}
.q-legal ol{list-style:decimal outside}
.q-legal li{margin-bottom:.45rem}
.q-legal strong{color:var(--primary);font-weight:600}
.q-legal a{color:var(--primary);text-decoration:underline;text-underline-offset:.18em}
.q-legal a:hover{color:var(--accent)}
.q-legal-pendiente{background:#ffe9b8;color:#7a4a00;font-weight:600;
  padding:.05em .45em;border-radius:3px;white-space:nowrap}
.q-legal__fecha{font-family:Inter,sans-serif;font-size:.85rem;color:var(--muted-foreground);
  margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--border)}

/* ── Comprobación anti-spam del formulario (pregunta de suma) ─────────────── */
.q-field__q{font-family:Inter,sans-serif;font-size:.95rem;color:var(--foreground);
  margin:0 0 .55rem;line-height:1.5}
.q-field__q strong{color:var(--accent);font-weight:600}
.q-field__help{font-family:Inter,sans-serif;font-size:.78rem;color:var(--muted-foreground);
  margin:.4rem 0 0;line-height:1.45}
.q-field--captcha input{max-width:12rem}

/* ── Banner del Kit Digital en el pie ─────────────────────────────────────── */
/* El pie es oscuro (--foreground) y el banner es la versión de texto claro:
   va a ancho contenido y centrado, separado por un filete del mismo tono que
   el resto del pie. */
.q-kit{margin-top:2.5rem;padding-top:1.75rem;
  border-top:1px solid rgba(253,250,241,.10);text-align:center}
.q-kit__aval{font-family:Inter,sans-serif;font-size:.68rem;line-height:1.6;
  letter-spacing:.05em;text-transform:uppercase;color:rgba(253,250,241,.55);
  max-width:42rem;margin:0 auto 1.1rem;text-align:center}
.q-kit img{display:block;width:100%;max-width:720px;height:auto;margin:0 auto}
@media(max-width:600px){
  .q-kit{margin-top:2rem;padding-top:1.4rem}
  .q-kit__aval{font-size:.62rem;letter-spacing:.03em;margin-bottom:.9rem}
  .q-kit img{max-width:100%}
}