/* ==========================================================================
   Trazos Creativos — estilos base del tema
   Reproduce el diseño de Readdy con el marcado del sistema website-nuevo.
   ========================================================================== */

/* ---------- Reset ligero ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--alto-cabecera) + 16px); -webkit-font-smoothing:antialiased; }
body{
  margin:0;
  font-family:var(--fuente-texto);
  font-size:var(--texto-base);
  line-height:var(--alto-linea);
  color:var(--color-texto);
  background:var(--color-fondo);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--color-enlace); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4,h5,h6{ font-family:var(--fuente-titulos); font-weight:600; letter-spacing:-0.02em; line-height:1.1; color:var(--tz-tinta-900); }
::selection{ background:var(--color-principal); color:#fff; }

.contenedor{ width:100%; max-width:var(--ancho-maximo); margin-inline:auto; padding-inline:16px; }
@media (min-width:768px){ .contenedor{ padding-inline:32px; } }

.salta-al-contenido{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--color-principal); color:var(--tz-tinta); padding:10px 16px; border-radius:0 0 8px 0;
  font-weight:700; font-size:13px;
}
.salta-al-contenido:focus{ left:0; text-decoration:none; }

/* ======================================================================
   CABECERA (fija, oscura)
   ====================================================================== */
.sitio-cabecera{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:var(--tz-tinta);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid rgba(255,255,255,0);
}
.sitio-cabecera.desplazado{
  background:rgba(11,10,7,.95);
  backdrop-filter:blur(10px);
  border-bottom-color:rgba(252,252,249,.10);
}
.cabecera-fila{
  display:flex; align-items:center; gap:18px;
  height:var(--alto-cabecera);
}
.sitio-logo{ display:inline-flex; align-items:center; gap:12px; flex-shrink:0; }
.sitio-logo:hover{ text-decoration:none; }
.sitio-logo img{ height:44px; width:auto; object-fit:contain; }
.sitio-logo .logo-texto{ color:var(--tz-fondo); font-family:var(--fuente-titulos); font-weight:700; font-size:20px; }
@media (min-width:768px){ .sitio-logo img{ height:48px; } }

.cabecera-badge{
  display:none; align-items:center; gap:6px; flex-shrink:0;
  border:1px solid rgba(123,177,64,.4); border-radius:999px;
  padding:4px 10px;
  font-family:var(--fuente-titulos); font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; color:var(--tz-verde-300);
}
@media (min-width:1024px){ .cabecera-badge{ display:inline-flex; } }

/* Empuja el menú a la derecha */
.cabecera-nav{ display:none; margin-left:auto; align-items:center; gap:26px; }
@media (min-width:1024px){ .cabecera-nav{ display:flex; } }

.cabecera-acciones{ display:flex; align-items:center; gap:12px; margin-left:auto; flex-shrink:0; }
@media (min-width:1024px){ .cabecera-acciones{ margin-left:0; } }

.cabecera-cta{
  display:none; align-items:center; gap:8px; white-space:nowrap;
  background:var(--color-principal); color:var(--tz-tinta) !important;
  border-radius:var(--radio); padding:10px 20px;
  font-family:var(--fuente-titulos); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  transition:background .2s ease;
}
.cabecera-cta:hover{ background:var(--tz-verde-claro); text-decoration:none; }
.cabecera-cta svg{ width:15px; height:15px; }
@media (min-width:768px){ .cabecera-cta{ display:inline-flex; } }

/* Hamburguesa */
.boton-menu{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radio);
  background:transparent; color:var(--tz-fondo-100);
  border:1px solid rgba(252,252,249,.2); cursor:pointer; font-size:20px; line-height:1;
  transition:border-color .2s ease, color .2s ease;
}
.boton-menu:hover{ border-color:var(--color-principal); color:var(--color-principal); }
@media (min-width:1024px){ .boton-menu{ display:none; } }

/* ---------- Menú principal (escritorio) ---------- */
.menu-principal{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }
.menu-principal > li{ position:relative; }
.menu-principal > li > a{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--fuente-titulos); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--tz-fondo-200); transition:color .2s ease;
}
.menu-principal > li > a:hover{ color:var(--color-principal-claro); text-decoration:none; }
.menu-principal > li.activo > a{ color:var(--color-principal-claro); }
.menu-principal .caret{ width:10px; height:10px; opacity:.8; }

/* Submenú (dropdown de Servicios) */
.menu-principal .submenu{
  position:absolute; left:50%; top:100%; transform:translateX(-50%);
  min-width:300px; padding-top:14px;
  opacity:0; visibility:hidden; transition:opacity .18s ease;
  z-index:40;
}
.menu-principal li.tiene-hijos:hover .submenu,
.menu-principal li.tiene-hijos.abierto .submenu{ opacity:1; visibility:visible; }
.menu-principal .submenu-caja{
  background:var(--tz-fondo); border:1px solid var(--tz-fondo-200);
  border-radius:var(--radio); box-shadow:var(--sombra-media); padding:8px;
}
.menu-principal .submenu-caja a{
  display:block; border-radius:6px; padding:9px 12px;
  font-size:13px; line-height:1.35; color:var(--tz-tinta-800);
  text-transform:none; letter-spacing:normal; font-weight:500; font-family:var(--fuente-texto);
  transition:background .15s ease, color .15s ease;
}
.menu-principal .submenu-caja a:hover{ background:var(--tz-fondo-100); color:var(--tz-verde-700); text-decoration:none; }

/* ---------- Menú móvil ---------- */
.menu-movil{ display:none; }
.cabecera-fila.abierto .menu-movil{
  display:block; position:absolute; left:0; right:0; top:var(--alto-cabecera);
  background:var(--tz-tinta); border-top:1px solid rgba(252,252,249,.08);
  padding:8px 16px 24px; max-height:calc(100vh - var(--alto-cabecera)); overflow-y:auto;
}
@media (min-width:1024px){ .cabecera-fila.abierto .menu-movil{ display:none; } }
.menu-movil ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.menu-movil > ul > li > a{
  display:block; padding:13px 2px; border-bottom:1px solid rgba(252,252,249,.06);
  font-family:var(--fuente-titulos); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; color:var(--tz-fondo-200);
}
.menu-movil > ul > li > a:hover{ color:var(--color-principal-claro); text-decoration:none; }
.menu-movil .submenu-movil{ padding:4px 0 8px 10px; }
.menu-movil .submenu-movil a{
  display:block; padding:7px 2px; font-size:12px; color:rgba(238,237,231,.8);
  text-transform:none; letter-spacing:normal; font-weight:500; font-family:var(--fuente-texto);
}
.menu-movil .cta-movil{
  display:inline-flex; width:100%; align-items:center; justify-content:center; gap:8px;
  margin-top:18px; background:var(--color-principal); color:var(--tz-tinta) !important;
  border-radius:var(--radio); padding:13px 20px;
  font-family:var(--fuente-titulos); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
}
.menu-movil .cta-movil:hover{ text-decoration:none; background:var(--tz-verde-claro); }

/* ---------- Selector de idioma ---------- */
.selector-idioma{ display:inline-flex; align-items:center; gap:8px; }
.selector-idioma a{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--fuente-titulos); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--tz-fondo-200);
  border:1px solid rgba(252,252,249,.2); border-radius:999px; padding:4px 10px;
  transition:border-color .2s ease, color .2s ease;
}
.selector-idioma a:hover{ color:var(--color-principal-claro); border-color:var(--color-principal); text-decoration:none; }
.selector-idioma svg{ width:16px; height:11px; border-radius:2px; }

/* ======================================================================
   CUERPO
   ====================================================================== */
.sitio-cuerpo{ padding-top:var(--alto-cabecera); min-height:60vh; }

/* Banda de encabezado de página interna (estilo PageHero de Readdy) */
.pagina-hero{
  position:relative; overflow:hidden;
  background:var(--tz-fondo-100); border-bottom:1px solid var(--tz-fondo-200);
}
.pagina-hero::before,
.pagina-hero::after{
  content:""; position:absolute; border-radius:999px; filter:blur(60px); pointer-events:none; z-index:0;
}
.pagina-hero::before{ right:-80px; top:-70px; width:320px; height:320px; background:rgba(177,220,136,.45); }
.pagina-hero::after{ left:-90px; bottom:-40px; width:240px; height:240px; background:rgba(241,184,77,.35); }
.pagina-hero .contenedor{ position:relative; z-index:1; padding-top:28px; padding-bottom:48px; }
.pagina-hero .eyebrow{
  display:inline-block; font-family:var(--fuente-titulos); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.24em; color:var(--tz-verde-700); margin-top:24px;
}
.pagina-hero h1{
  margin:14px 0 0; font-size:clamp(2.1rem, 4vw, 3rem); color:var(--tz-tinta);
}
.pagina-hero .hero-desc{ margin:18px 0 0; max-width:640px; color:var(--tz-tinta-800); font-size:1.02rem; }

/* Migas de pan */
.migas{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-family:var(--fuente-titulos); font-size:10px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--tz-gris);
}
.migas a{ color:var(--tz-gris); }
.migas a:hover{ color:var(--tz-verde-700); text-decoration:none; }
.migas .sep{ opacity:.6; }
.migas [aria-current="page"]{ color:var(--tz-tinta-900); }

/* ---------- Disposiciones de contenido ---------- */
.disposicion{ padding-block:var(--espacio-seccion); }
.disposicion .contenido{ max-width:820px; }
.disposicion.completa .contenido{ margin-inline:auto; }
.disposicion.ambas,
.disposicion.izquierda,
.disposicion.derecha{ display:grid; gap:40px; }
@media (min-width:900px){
  .disposicion.ambas{ grid-template-columns:1fr minmax(0,3fr) 1fr; }
  .disposicion.izquierda{ grid-template-columns:1fr minmax(0,3fr); }
  .disposicion.derecha{ grid-template-columns:minmax(0,3fr) 1fr; }
}
.columna-lateral{ font-size:.95rem; }

/* Tipografía del contenido */
.contenido h1{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); margin:0 0 .6em; }
.contenido h2{ font-size:1.55rem; margin:1.8em 0 .5em; }
.contenido h3{ font-size:1.25rem; margin:1.5em 0 .4em; }
.contenido p{ margin:0 0 1.1em; }
.contenido ul,.contenido ol{ margin:0 0 1.2em; padding-left:1.3em; }
.contenido li{ margin-bottom:.4em; }
.contenido img{ border-radius:var(--radio); margin:1.5em 0; }
.contenido blockquote{
  margin:1.6em 0; padding:1em 1.3em; border-left:4px solid var(--color-principal);
  background:var(--tz-fondo-100); border-radius:0 var(--radio) var(--radio) 0;
  font-family:var(--fuente-titulos); font-style:italic; color:var(--tz-tinta-800);
}
.contenido a{ color:var(--tz-verde-700); text-decoration:underline; text-underline-offset:2px; }
.contenido a:hover{ color:var(--color-principal); }

/* ---------- Botones de contenido ---------- */
.tz-btn{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  border-radius:var(--radio); padding:14px 26px;
  font-family:var(--fuente-titulos); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; text-decoration:none !important;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.tz-btn svg{ width:16px; height:16px; }
.tz-btn-primario{ background:var(--color-principal); color:var(--tz-tinta) !important; }
.tz-btn-primario:hover{ background:var(--tz-verde-claro); }
.tz-btn-contorno{ border:1px solid var(--tz-fondo-200); background:var(--tz-fondo); color:var(--tz-tinta-900) !important; }
.tz-btn-contorno:hover{ border-color:var(--color-principal); color:var(--tz-verde-700) !important; }

/* ======================================================================
   PIE (verde oscuro)
   ====================================================================== */
.sitio-pie{ background:var(--tz-verde-950); color:var(--tz-fondo-100); }
.sitio-pie .contenedor{ padding-block:56px; }
.pie-columnas{ display:grid; gap:40px; }
@media (min-width:640px){ .pie-columnas{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .pie-columnas{ grid-template-columns:1.3fr .7fr .9fr 1fr; } }

.pie-marca .pie-logo img{ height:48px; width:auto; object-fit:contain; }
.pie-marca .pie-logo .logo-texto{ font-family:var(--fuente-titulos); font-weight:700; font-size:22px; color:#fff; }
.pie-marca .pie-lema{ margin:18px 0 0; max-width:280px; font-size:13px; line-height:1.7; color:rgba(247,246,241,.7); }

.pie-aniversario{
  display:flex; align-items:center; gap:12px; margin-top:18px;
  border:1px solid rgba(247,246,241,.15); background:rgba(252,252,249,.05);
  border-radius:var(--radio); padding:10px;
}
.pie-aniversario .emblema{ height:40px; width:64px; flex-shrink:0; overflow:hidden; border-radius:4px; background:var(--tz-fondo); }
.pie-aniversario .emblema img{ height:100%; width:100%; object-fit:contain; }
.pie-aniversario .tagline{ font-family:var(--fuente-titulos); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--tz-verde-300); margin:0; }
.pie-aniversario .anios{ font-family:var(--fuente-titulos); font-size:9px; text-transform:uppercase; letter-spacing:.14em; color:rgba(247,246,241,.5); margin:2px 0 0; }

.redes{ display:flex; gap:8px; list-style:none; margin:22px 0 0; padding:0; }
.redes a{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:999px; border:1px solid rgba(247,246,241,.2); color:rgba(247,246,241,.8);
  font-size:13px; transition:border-color .2s ease, color .2s ease;
}
.redes a:hover{ border-color:var(--color-principal); color:var(--tz-verde-300); text-decoration:none; }

.pie-copy{ margin-top:22px; font-family:var(--fuente-titulos); font-size:10px; text-transform:uppercase; letter-spacing:.14em; line-height:1.9; color:rgba(247,246,241,.5); }

.pie-titulo{ font-family:var(--fuente-titulos); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--tz-verde-300); margin:0 0 16px; }
.pie-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pie-lista a{ font-size:13px; color:rgba(247,246,241,.78); }
.pie-lista a:hover{ color:var(--tz-verde-300); text-decoration:none; }

.pie-contacto{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.pie-contacto li{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:rgba(247,246,241,.82); }
.pie-contacto a{ color:rgba(247,246,241,.82); }
.pie-contacto a:hover{ color:var(--tz-verde-300); text-decoration:none; }
.pie-contacto .ico{ color:var(--tz-verde-300); flex-shrink:0; margin-top:2px; }

.pie-barra{ border-top:1px solid rgba(247,246,241,.15); }
.pie-barra .contenedor{ display:flex; flex-direction:column; gap:8px; padding-block:20px; }
@media (min-width:768px){ .pie-barra .contenedor{ flex-direction:row; align-items:center; justify-content:space-between; } }
.pie-barra p{ margin:0; font-family:var(--fuente-titulos); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:rgba(247,246,241,.5); }

/* ---------- Accesibilidad: foco visible ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--tz-verde-300); outline-offset:2px; border-radius:4px;
}