/* ===================================================================
   BASE de las páginas interiores (hoy: contacto.html)
   -------------------------------------------------------------------
   index.html lleva todo su CSS dentro del propio archivo porque el hero
   3D depende de él. Una página interior no necesita nada de aquello:
   solo la base (negro, tipografía, cursor) y el MENÚ superior, que se
   copian de index.html para que las dos páginas se vean igual.
   Si se retoca el menú en index.html, hay que retocarlo también aquí.
   El resto (secciones, formulario, pie) sale de design.css, que es
   compartido por las dos páginas.
   =================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#000;color:#fff;
    font-family:"Plus Jakarta Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
    overflow-x:hidden}
/* mismo cursor metálico que en la portada */
html,body{cursor:url("mouse-cursor.png") 1 0, auto}

/* ---------- MENÚ superior (copia del de index.html) ----------
   Texto llano centrado, igual que en la portada y en el portal.
   En la portada se esconde al salir del hero; aquí, al bajar el scroll.
   Si se retoca el menú en index.html, hay que retocarlo también aquí. */
#topmenu{position:fixed;top:4vh;left:50%;transform:translateX(-50%);
      z-index:30;display:flex;align-items:center;justify-content:center;
      flex-wrap:wrap;gap:8px 28px;max-width:92vw;pointer-events:auto;
      transition:opacity .45s ease, transform .45s ease, filter .45s ease}
/* al bajar se difumina y se va; al subir vuelve (lo decide el script del final
   de contacto.html, según el sentido del scroll) */
#topmenu.tm-hide{opacity:0;transform:translate(-50%,-20px);filter:blur(9px);
      pointer-events:none}
/* Tipografía fijada, no heredada: el menú debe verse igual en toda la web. */
#topmenu .tm-btn{appearance:none;-webkit-appearance:none;background:none;border:0;
      padding:8px 0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;
      font-family:Arial,Helvetica,sans-serif;font-size:clamp(12px,1vw,15px);
      font-weight:500;line-height:1.2;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.72);white-space:nowrap;
      text-decoration:none;cursor:pointer;transition:color .25s ease}
#topmenu .tm-btn:hover{color:#fff}
#topmenu .tm-btn:focus-visible{outline:2px solid #ab3530;outline-offset:4px}
#topmenu .tm-active{color:#fff;font-weight:700;background:none;border:0;cursor:default}
@media (max-width:760px){
  #topmenu{top:2vh;gap:6px 18px;max-width:92vw}
  #topmenu .tm-btn{padding:6px 0;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  #topmenu .tm-btn{transition:none}
}

/* La página interior no tiene hero: la sección arranca por debajo del menú
   flotante, que aquí está siempre visible. */
.pagina-interior #contacto{padding-top:clamp(104px,13vh,160px)}
@media (max-width:760px){
  .pagina-interior #contacto{padding-top:94px}
}

/* Pie de la página interior: es solo una barra fina, así que va SIN las líneas
   de separación (ni la del propio pie ni la de encima del texto) y con todo
   centrado, en columna: primero el reclamo y debajo los enlaces. */
.pagina-interior .site-footer{border-top:0;padding-top:70px;
    /* el resplandor rojo arranca desde MUY abajo y llega a negro puro antes del
       borde superior: así no se ve el escalón de color contra la sección, que
       también termina en negro. */
    background:radial-gradient(ellipse at 50% 170%,
        #3c1111 0%, #2b1010 20%, #1b0c0c 38%, #0d0707 58%, #000 78%)}
.pagina-interior .footer-bottom{border-top:0;padding-top:0;
    flex-direction:column;justify-content:center;align-items:center;
    text-align:center;gap:16px}
.pagina-interior .footer-bottom nav{justify-content:center}

/* Páginas legales (aviso legal, privacidad, cookies…): de momento solo la
   cabecera y un hueco vacío donde irá el texto cuando esté redactado. */
.legal{position:relative;padding:clamp(104px,13vh,160px) 6vw 96px;min-height:72vh}
.legal-body{max-width:1200px;margin:0 auto;color:#aba5a2;font-size:15px;line-height:1.8}
.legal-body:not(:empty){max-width:760px}
.legal-body h3{color:#f2eeec;font-size:19px;line-height:1.35;margin:40px 0 10px}
.legal-body p,.legal-body ul{margin:0 0 14px}
.legal-body ul{padding-left:20px}
.legal-body li{margin:0 0 8px}
.legal-body strong{color:#e4dfdc;font-weight:600}
.legal-body a{color:#86e0ab}
.legal-body .legal-fecha{font-size:13px;color:#7d7875}
@media (max-width:760px){
  .legal{padding:94px 6vw 64px}
  .legal .ct-head h2{font-size:clamp(46px,13vw,96px);margin:22px 0}
}

/* Sello de marca al final de la columna derecha, bajo el atajo de WhatsApp.
   Sin caja: la propia silueta del sticker es la forma, con una sombra suave
   para que no quede pegado al fondo negro. */
.ct-sticker{margin:58px 0 0;padding:0;display:flex;justify-content:center}
.ct-sticker img{width:min(240px,58%);height:auto;display:block;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,.8))}
@media (max-width:1040px){
  .ct-sticker{margin-top:36px}
  .ct-sticker img{width:min(185px,44%)}
}

/* Teléfono: lista de prefijos + número, en la misma línea. En pantallas
   estrechas el prefijo se queda arriba y el número debajo. */
.ct-tel{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:10px}
.ct-tel select{text-overflow:ellipsis}
@media (max-width:420px){
  .ct-tel{grid-template-columns:1fr;gap:10px}
}