/* ============================================================
   HANS PEOPLE — Estilos generales
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:            #060606;
  --bg-alt:        #0c0c0c;
  --card:          #17171a;
  --card-2:        #1f2023;
  --line:          rgba(255,255,255,.12);
  --text:          #f5f3ef;
  --text-muted:    #a9a9ac;
  --text-faint:    rgba(245,243,239,.18);
  --accent:        #c68a3d;
  --accent-light:  #e2ac66;
  --font-display:  'Poppins', sans-serif;
  --font-body:     'Inter', sans-serif;
  --font-script:   'Alex Brush', cursive;
  --container:     1280px;
  --header-h:      92px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:inherit; text-decoration:none; }

ul{ list-style:none; margin:0; padding:0; }

button{ font-family:inherit; cursor:pointer; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 6vw;
}

.eyebrow{
  font-family:var(--font-body);
  text-transform:none;
  letter-spacing:.03em;
  color:var(--text-muted);
  font-size:1rem;
  margin:0 0 18px;
}

.accent{ color:var(--accent); }
.italic-accent{ color:var(--accent); font-style:italic; }
.accent-em{ color:var(--accent); font-style:italic; }

/* ---------------- Header ---------------- */
.site-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:500;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6vw;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none;
}
.site-header > *{ pointer-events:auto; }

.logo{
  display:inline-flex;
  align-items:center;
  line-height:0;
}
.logo-img{
  height:138px;
  width:138px;
  display:block;
  background-image:url('../images/logo-camareros.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.hamburger{
  width:46px;
  height:46px;
  border:none;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:7px;
}
.hamburger span{
  display:block;
  height:2px;
  background:#fff;
  width:32px;
  transition:width .25s ease, opacity .25s ease;
}
.hamburger:hover span:nth-child(1){ width:26px; }
.hamburger:hover span:nth-child(3){ width:20px; }

/* ---------------- Menu overlay ---------------- */
.menu-overlay{
  position:fixed;
  inset:0;
  z-index:900;
  background:#050505;
  display:none;
  opacity:0;
  transition:opacity .35s ease;
}
.menu-overlay.is-open{
  display:block;
}
.menu-overlay.is-visible{
  opacity:1;
}

.menu-close{
  position:absolute;
  top:24px;
  right:6vw;
  width:44px;
  height:44px;
  border:none;
  background:transparent;
  color:#fff;
  font-size:2rem;
  line-height:1;
  z-index:20;
}

.menu-inner{
  height:100%;
  padding:150px 6vw 60px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
  align-items:flex-start;
}

.menu-links{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.menu-links a{
  font-family:var(--font-display);
  font-weight:600;
  font-size:2.1rem;
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:8px;
  text-decoration-color:rgba(255,255,255,.35);
  width:max-content;
  transition:color .2s ease, text-decoration-color .2s ease;
}
.menu-links a:hover,
.menu-links a.is-active{
  color:var(--accent);
  text-decoration-color:var(--accent);
}
.menu-sublinks{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:2px 0 6px 4px;
}
.menu-sublinks a{
  font-family:var(--font-body);
  font-weight:400;
  font-size:1.15rem;
  color:var(--text-muted);
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-color:rgba(255,255,255,.2);
}
.menu-sublinks a:hover{ color:var(--accent); }

/* image marquee columns */
.menu-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  height:calc(100vh - 210px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}
.marquee-col{
  overflow:hidden;
  position:relative;
}
.marquee-track{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
}
.marquee-track img,
.marquee-track .ph-img{
  width:100%;
  border-radius:2px;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
}
.marquee-up .marquee-track{
  animation:scrollUp 22s linear infinite;
}
.marquee-down .marquee-track{
  animation:scrollDown 22s linear infinite;
}
@keyframes scrollUp{
  from{ transform:translateY(0); }
  to{ transform:translateY(-50%); }
}
@keyframes scrollDown{
  from{ transform:translateY(-50%); }
  to{ transform:translateY(0); }
}

/* ---------------- Placeholder images ---------------- */
.ph-img{
  position:relative;
  width:100%;
  background:
    linear-gradient(135deg, #1c1c1f, #0e0e10);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--text-muted);
  font-family:var(--font-body);
  font-size:.85rem;
  padding:10px;
  overflow:hidden;
}
.ph-img::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 14px);
}
.ph-img span{ position:relative; z-index:1; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--accent);
  color:#161616;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.03em;
  padding:18px 30px;
  border:none;
  border-radius:2px;
  transition:background .2s ease, transform .2s ease;
}
.btn:hover{ background:var(--accent-light); transform:translateY(-2px); }

/* ---------------- Footer ---------------- */
.site-footer{
  background:var(--bg-alt);
  border-top:1px solid var(--line);
  padding:90px 6vw 40px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1.3fr 1fr;
  gap:50px;
  padding-bottom:56px;
}

.footer-brand .logo{
  margin-bottom:18px;
}
.footer-brand .logo-img{
  height:168px;
  width:168px;
}
.footer-brand p{
  color:var(--text-muted);
  font-size:.95rem;
  max-width:320px;
  margin:0;
}

.footer-col h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color:var(--text);
  margin:0 0 24px;
}
.footer-col ul{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.footer-col a{
  color:var(--text-muted);
  font-size:.98rem;
  transition:color .2s ease;
}
.footer-col a:hover{ color:var(--accent); }
.footer-col a.is-active{ color:var(--accent); }

.footer-col .info-line{ margin:0 0 4px; }
.footer-col .info-line strong{
  display:block;
  color:var(--text);
  font-weight:600;
  margin-bottom:6px;
}
.footer-col .info-line a{ color:var(--text-muted); }
.footer-col .info-block{ margin-bottom:26px; }
.footer-col .info-block:last-child{ margin-bottom:0; }

.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:28px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  color:var(--text-muted);
  font-size:.85rem;
}

@media (max-width:1000px){
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:44px; }
}
@media (max-width:640px){
  .site-footer{ padding:60px 6vw 30px; }
  .footer-grid{ grid-template-columns:1fr; gap:38px; }
}

/* ============================================================
   HOME
   ============================================================ */
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero .hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.35) 100%);
}
.hero-text{
  position:relative;
  z-index:2;
  padding:0 6vw 8vh;
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(2.4rem, 7vw, 5.5rem);
  line-height:1.02;
  color:rgba(245,243,239,.55);
  max-width:900px;
}
.hero-text--sm{
  font-size:clamp(1.2rem, 3.5vw, 2.75rem);
  font-weight:800;
  max-width:640px;
  text-transform:none;
}
.hero-white{ color:var(--text); }
.hero-accent{ color:var(--accent); }

.modus{
  background:var(--bg);
  padding:120px 6vw;
  text-align:center;
}
.modus .eyebrow{ text-align:center; }
.modus p{
  max-width:1050px;
  margin:0 auto 28px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.3rem, 1.2vw, 2rem);
  line-height:1.5;
  color:var(--text);
}
.modus p:last-child{ margin-bottom:0; }
.modus p em, .modus p i{ font-style:italic; }
.modus .accent-em{ color:var(--accent); font-style:italic; }

/* ---------------- Google Reviews (carrusel con cabecera) ---------------- */
.reviews{
  background:var(--bg);
  padding:80px 6vw 110px;
}

.reviews-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:10px;
  padding:22px 28px;
  margin-bottom:36px;
}
.reviews-rating{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.google-mark{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; }
.google-mark .g-blue{ color:#5b8def; }
.google-mark .g-red{ color:#e2593e; }
.google-mark .g-yellow{ color:#e0ac2a; }
.google-mark .g-green{ color:#4f9d5b; }
.reviews-word{ color:var(--text); font-weight:600; font-family:var(--font-display); }
.reviews-stars-inline{ color:var(--accent); letter-spacing:1px; }
.reviews-score{ font-family:var(--font-display); font-weight:700; color:var(--text); }
.reviews-count{ font-family:var(--font-body); font-weight:400; color:var(--text-muted); font-size:.9rem; }
.reviews-cta{ padding:14px 22px; font-size:.9rem; white-space:nowrap; }

.reviews-carousel{
  display:flex;
  align-items:center;
  gap:14px;
}
.carousel-btn{
  flex:none;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  font-size:1.4rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.carousel-btn:hover{ background:var(--accent); color:#161616; }

.reviews-track{
  flex:1;
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:6px;
}
.reviews-track::-webkit-scrollbar{ height:6px; }
.reviews-track::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }

.review-card{
  scroll-snap-align:start;
  flex:0 0 320px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.review-top{
  display:flex;
  align-items:center;
  gap:12px;
}
.review-avatar{
  flex:none;
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
}
.review-author{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  color:var(--text);
  margin:0;
}
.review-author .verified{ color:var(--accent); font-size:.8rem; margin-left:2px; }
.review-time{
  margin:2px 0 0;
  font-size:.8rem;
  color:var(--text-muted);
}
.review-card .review-stars{
  color:var(--accent);
  letter-spacing:2px;
  font-size:1rem;
}
.review-text{
  color:var(--text-muted);
  font-size:.92rem;
  line-height:1.6;
  margin:0;
}

@media (max-width:640px){
  .review-card{ flex-basis:78vw; }
  .reviews-header{ flex-direction:column; align-items:flex-start; }
  .reviews-cta{ width:100%; text-align:center; justify-content:center; }
}

/* ---------------- Galería final home ---------------- */
.index-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  padding:0 6vw 110px;
}
.index-photos .photo-block{
  height:auto;
  width:100%;
  object-fit:initial;
  background:none;
}

@media (max-width:1000px){
}
@media (max-width:640px){
  .index-photos{ grid-template-columns:1fr; }
  .index-photos .photo-block{ height:100%; }
}

/* ============================================================
   ABOUT (Quienes somos)
   ============================================================ */
.about-hero{
  padding:calc(var(--header-h) + 90px) 6vw 100px;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:40px;
  align-items:center;
}
.about-hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.3rem, 5vw, 3.6rem);
  line-height:1.05;
  margin:10px 0 0;
}
.about-collage{
  position:relative;
  height:420px;
}
.about-collage .ph-img{
  position:absolute;
  border-radius:2px;
}
.about-collage .c1{ width:34%; height:88%; left:0; top:6%; }
.about-collage .c2{ width:40%; height:70%; left:28%; top:18%; }
.about-collage .c3{ width:34%; height:62%; left:64%; top:32%; }

.who-section{
  padding:100px 6vw;
  text-align:center;
  background:var(--bg);
}
.who-section .eyebrow{ text-align:center; }
.who-section p{
  max-width:1000px;
  margin:0 auto 32px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.2rem, 1.2vw, 1.85rem);
  line-height:1.5;
  color:var(--text);
}
.who-section p:last-child{ margin-bottom:0; }

/* Fotos reales en el collage "Quienes somos" (antes placeholders) */
.about-collage .ph-img{
  padding:0;
  border:none;
  background:none;
  display:block;
}
.about-collage .ph-img::before{ display:none; }
.about-collage .ph-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.lightbox-trigger{
  cursor:zoom-in;
  appearance:none;
  -webkit-appearance:none;
  margin:0;
  font:inherit;
  color:inherit;
  text-align:left;
}

.press-photo{
  padding:0 6vw 130px;
  display:flex;
  justify-content:center;
}
.press-photo-btn{
  border:none;
  background:none;
  padding:0;
  cursor:zoom-in;
  max-width:640px;
  width:100%;
}
.press-photo-btn img{
  width:100%;
  height:auto;
  display:block;
  border-radius:2px;
  border:1px solid var(--line);
}

/* Visor de imagen ampliada (lightbox) */
.lightbox-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(4,4,4,.94);
  display:none;
  align-items:center;
  justify-content:center;
  padding:60px 6vw;
}
.lightbox-overlay.is-open{ display:flex; }
.lightbox-image{
  max-width:100%;
  max-height:88vh;
  object-fit:contain;
  border-radius:2px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lightbox-close{
  position:absolute;
  top:24px;
  right:6vw;
  width:44px;
  height:44px;
  border:none;
  background:transparent;
  color:#fff;
  font-size:2rem;
  line-height:1;
}

/* ============================================================
   SERVICES
   ============================================================ */
.services-hero{
  padding:calc(var(--header-h) + 110px) 6vw 0;
}
.services-hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.3rem, 5vw, 3.6rem);
  line-height:1.05;
  margin:14px 0 60px;
}

.service-block{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:320px;
}
.service-block .ph-img{
  border-radius:0;
  border:none;
  height:100%;
  padding:0;
  background:none;
  display:block;
  width:100%;
}
.service-block .ph-img::before{ display:none; }
.service-block .ph-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.service-panel{
  background:linear-gradient(120deg, rgba(10,10,10,.97), rgba(10,10,10,.85));
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:60px 6% 60px 8%;
}
.service-panel h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  line-height:1.2;
  margin:0 0 30px;
}
.service-panel p{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--text);
  font-size:clamp(1.2rem, 1.2vw, 1.85rem);
  line-height:1.5;
  max-width:520px;
  margin:0 0 32px;
}
.service-panel p:last-child{ margin-bottom:0; }

.service-block.reverse{
  grid-template-columns:1fr 1fr;
}
.service-block.reverse .service-panel{ order:1; }
.service-block.reverse .ph-img{ order:2; }
.service-block.reverse .service-panel{
  background:linear-gradient(240deg, rgba(10,10,10,.97), rgba(10,10,10,.85));
}

.services-list-footer{
  padding:70px 6vw 40px;
  text-align:center;
}
.services-list-footer p{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--text);
  max-width:700px;
  margin:0 auto 40px;
  font-size:clamp(1.2rem, 2.4vw, 1.85rem);
  line-height:1.5;
}
.trust-photo{
  display:block;
  width:100%;
  max-width:760px;
  margin:0 auto;
  border:none;
  background:none;
  padding:0;
  cursor:zoom-in;
}
.trust-photo img{
  width:100%;
  height:auto;
  display:block;
  border-radius:2px;
}

/* ---------------- Sala privada (2 fotos juntas) ---------------- */
.private-room{
  padding:90px 6vw 130px;
  text-align:center;
}
.private-room-text{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.2rem, 2.4vw, 1.85rem);
  line-height:1.5;
  max-width:850px;
  margin:0 auto 44px;
  color:var(--text);
}
.private-room-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:1000px;
  margin:0 auto;
}
.private-room-photos .photo-block{ height:360px; cursor:zoom-in; border:none; padding:0; }

@media (max-width:640px){
  .private-room-photos{ grid-template-columns:1fr; }
  .private-room-photos .photo-block{ height:260px; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-hero{
  padding:calc(var(--header-h) + 90px) 6vw 90px;
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  gap:24px;
  align-items:center;
}
.contact-hero .photo-block{ height:420px; border-radius:2px; }

.photo-block{
  width:100%;
  height:420px;
  object-fit:cover;
  border-radius:2px;
  display:block;
}
.photo-block.lightbox-trigger{
  overflow:hidden;
  background:none;
  border:none;
  padding:0;
}
.photo-block.lightbox-trigger img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.contact-intro{
  max-width:800px;
  margin:0 auto 60px;
  text-align:center;
}
.contact-intro p{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--text);
  font-size:clamp(1.15rem, 1.2vw, 1.85rem);
  line-height:1.5;
  margin:0 0 32px;
}
.contact-intro p:last-child{ margin-bottom:0; }
.contact-intro a.accent-em{ text-decoration:underline; }

.form-note{
  text-align:center;
  color:var(--text-muted);
  font-size:.9rem;
  font-style:italic;
  margin:0 0 34px;
}

/* Campo trampa anti-spam: oculto visualmente pero accesible a bots */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Mensaje de confirmación / error tras enviar el formulario */
.form-msg{
  display:none;
  max-width:800px;
  margin:0 auto 36px;
  padding:18px 22px;
  border-radius:6px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:1rem;
  text-align:center;
}
.form-msg.is-visible{ display:block; }
.form-msg.is-success{
  background:rgba(198,138,61,.12);
  border:1px solid var(--accent);
  color:var(--text);
}
.form-msg.is-error{
  background:rgba(220,90,70,.1);
  border:1px solid #d0644d;
  color:var(--text);
}

.contact-photos{
  max-width:800px;
  margin:70px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.contact-photos .photo-block{ height:320px; }

@media (max-width:1000px){
  .contact-hero .photo-block{ height:220px; }
}
@media (max-width:640px){
  .contact-photos{ grid-template-columns:1fr; }
}
.contact-hero-text{ text-align:center; }
.contact-hero-text .eyebrow{ text-align:center; }
.contact-hero-text h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.3rem, 5vw, 3.6rem);
  line-height:1.05;
  margin:0;
}

.contact-form-wrap{
  padding:0 6vw 100px;
}
.contact-form{
  max-width:800px;
  margin:0 auto;
  border:1px solid var(--line);
  padding:60px 50px;
}
.toggle-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:40px;
}
.toggle-option{
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--line);
  padding:20px 22px;
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.1rem;
}
.toggle-option input{ accent-color:var(--accent); width:18px; height:18px; }

.field{ margin-bottom:34px; }
.field label{
  display:block;
  font-family:var(--font-display);
  font-weight:500;
  margin-bottom:12px;
  color:var(--text);
}
.field input,
.field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:10px 2px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
}
.field input::placeholder,
.field textarea::placeholder{ color:#6a6a6a; }
.field input:focus,
.field textarea:focus{
  outline:none;
  border-bottom-color:var(--accent);
}
.field textarea{ resize:vertical; min-height:100px; border:1px solid var(--line); padding:12px; }

.agree-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:26px;
  color:var(--text-muted);
  font-size:.95rem;
}
.agree-row input{ margin-top:4px; accent-color:var(--accent); }
.agree-row a{ color:var(--text); text-decoration:underline; }
.agree-row a:hover{ color:var(--accent); }

.recaptcha-box{
  display:inline-flex;
  align-items:center;
  gap:12px;
  border:1px solid #3a3a3a;
  background:#f9f9f9;
  color:#333;
  padding:14px 16px;
  border-radius:3px;
  margin-bottom:36px;
}
.recaptcha-box input{ width:20px; height:20px; }
.recaptcha-box .rc-label{ font-size:.95rem; }
.recaptcha-box .rc-badge{
  margin-left:20px;
  font-size:.65rem;
  color:#666;
  text-align:center;
  line-height:1.1;
}

.submit-btn{
  width:100%;
  justify-content:center;
  font-size:1rem;
}

.contact-info{
  padding:0 6vw 120px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:1000px;
  margin:0 auto;
}
.info-card{
  background:var(--card);
  padding:36px 32px;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:14px;
}
.info-card svg{ width:34px; height:34px; stroke:var(--accent); }
.info-card .info-value{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.4rem;
}
.info-card a.info-value{ text-decoration:underline; }
.info-card .info-label{ color:var(--text-muted); font-size:.95rem; }
.info-card.email-card{ grid-column:1 / -1; max-width:480px; margin:0 auto; }

/* ============================================================
   LEGAL PAGES (Aviso legal, Privacidad, etc.)
   ============================================================ */
.legal-wrap{
  padding:calc(var(--header-h) + 80px) 6vw 40px;
}
.legal-wrap h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem, 4vw, 2.8rem);
  margin:0 0 26px;
}
.legal-divider{
  border:none;
  border-top:1px solid var(--line);
  margin:0 0 54px;
}
.legal-body{ padding:0 6vw 110px; max-width:1100px; margin:0 auto; }
.legal-body h2{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:1.3rem;
  letter-spacing:.01em;
  color:var(--text);
  margin:52px 0 20px;
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{
  color:var(--text-muted);
  font-size:1rem;
  line-height:1.75;
  margin:0 0 20px;
}
.legal-body strong{ color:var(--text); font-weight:600; }
.legal-body a{ color:var(--accent); text-decoration:underline; }
.legal-body ol,
.legal-body ul{
  color:var(--text-muted);
  line-height:1.75;
  padding-left:24px;
  margin:0 0 20px;
}
.legal-body li{ margin-bottom:10px; }
.legal-body li::marker{ color:var(--accent); }

@media (max-width:640px){
  .legal-wrap{ padding-top:calc(var(--header-h) + 50px); }
  .legal-body h2{ font-size:1.1rem; margin-top:40px; }
}
@media (max-width:1000px){
  .menu-inner{ grid-template-columns:1fr; gap:40px; }
  .menu-gallery{ display:none; }
  .about-hero{ grid-template-columns:1fr; }
  .about-collage{ height:340px; margin-top:20px; }
  .service-block, .service-block.reverse{ grid-template-columns:1fr; min-height:auto; }
  .service-block .ph-img{ height:340px; order:1 !important; }
  .service-panel{ order:2 !important; padding:50px 6vw; }
  .contact-hero{ grid-template-columns:1fr; }
  .contact-hero-text{ order:-1; }
  .contact-info{ grid-template-columns:1fr; }
  .info-card.email-card{ max-width:none; }
}

/* ============================================================
   LEGAL PAGES (Aviso legal, Privacidad, etc.)
   ============================================================ */
.legal-hero{
  padding:calc(var(--header-h) + 90px) 6vw 40px;
}
.legal-hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.2rem, 4.5vw, 3.2rem);
  margin:0 0 30px;
}
.legal-hero hr{
  border:none;
  border-top:1px solid var(--line);
  margin:0;
}

.legal-content{
  padding:20px 6vw 120px;
}
.legal-content .legal-inner{
  max-width:960px;
}
.legal-content h2{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:1.3rem;
  color:var(--accent);
  margin:52px 0 18px;
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{
  color:var(--text-muted);
  font-size:1rem;
  line-height:1.75;
  margin:0 0 18px;
}
.legal-content strong{ color:var(--text); font-weight:600; }
.legal-content ol,
.legal-content ul{
  color:var(--text-muted);
  font-size:1rem;
  line-height:1.75;
  padding-left:22px;
  margin:0 0 18px;
}
.legal-content li{ margin-bottom:10px; }
.legal-content a{ color:var(--accent); text-decoration:underline; }
.legal-content .legal-meta{
  color:var(--text);
  margin:0 0 8px;
}

/* Ajustes de consentimiento de cookies */
.cookie-settings{
  border:1px solid var(--line);
  margin:0 0 30px;
}
.cookie-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);
  font-weight:500;
  color:var(--text);
}
.cookie-row:last-child{ border-bottom:none; }
.cookie-status{
  font-family:var(--font-body);
  font-weight:500;
  font-size:.9rem;
  color:var(--text-muted);
}
.cookie-status--always{ color:var(--accent); }

@media (max-width:640px){
  :root{ --header-h:74px; }
  .logo-img{ height:108px; width:108px; }
  .hero-text{ font-size:clamp(2rem,9vw,3rem); }
  .modus{ padding:80px 6vw; }
  .toggle-row{ grid-template-columns:1fr; }
  .contact-form{ padding:40px 24px; }
  .menu-inner{ padding:120px 6vw 60px; }
  .menu-links a{ font-size:1.6rem; }
  .service-panel h2{ font-size:1.6rem; }
  .legal-content h2{ font-size:1.1rem; margin:40px 0 14px; }
}

.consent-accordion {
    margin-top: 15px;
    border: 1px solid #444;
}

.consent-item {
    background: #333;
    border-bottom: 1px solid #444;
}

.consent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    color: #fff;
    cursor: pointer;
    font-weight: 500;
    list-style: none;
}

.consent-header::-webkit-details-marker {
    display: none;
}

.consent-header::after {
    content: '▲';
    font-size: 0.8em;
}

.consent-item[open] .consent-header::after {
    content: '▼';
}

.status {
    font-size: 0.9em;
    color: #aaa;
}

.status.checkbox {
    color: #f1c40f;
    font-size: 1.2em;
}

.consent-content {
    padding: 15px;
    background: #444;
    color: #ddd;
    font-size: 0.9em;
    line-height: 1.5;
}
