/*
Theme Name:   Eduardo Tabeira · Tarot (Astra Child)
Theme URI:    https://eduardotabeira.com
Description:  Child theme de Astra con el sistema de diseño "Rojo ritual" para el sitio de Eduardo Tabeira. Desarrollado por Infinite Ideas Web Design.
Author:       Infinite Ideas Web Design
Author URI:   https://iiwd.ca
Template:     astra
Version:      1.29.0
Text Domain:  eduardotabeira-child
*/

/* =========================================================================
   TIPOGRAFÍAS AUTOALOJADAS
   Archivos en /assets/fonts/ · google-webfonts-helper · subset latin · woff2
   EB Garamond v33 · Inter v20

   Antes venían de Google Fonts: 750 ms de bloqueo de renderizado y una
   conexión a un tercero. Sirviéndolas desde el propio servidor salen del
   camino crítico y se acompaña lo declarado en la política de privacidad.

   Van al PRINCIPIO del archivo: el navegador tiene que conocer las
   familias antes de encontrar la primera regla que las usa.
   ========================================================================= */

@font-face{
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-v33-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-v33-latin-italic.woff2') format('woff2');
}
@font-face{
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-v33-latin-500.woff2') format('woff2');
}
@font-face{
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-v33-latin-500italic.woff2') format('woff2');
}
@font-face{
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-v33-latin-600.woff2') format('woff2');
}

@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/inter-v20-latin-300.woff2') format('woff2');
}
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-v20-latin-600.woff2') format('woff2');
}

/* =========================================================================
   SISTEMA DE DISEÑO — "ROJO RITUAL"
   Estas variables son la única fuente de verdad de la paleta.
   Para ajustar un color en todo el sitio, se cambia UNA vez aquí.
   ========================================================================= */
:root{
  /* Fondo */
  --et-noche:      #0B0A0C;   /* fondo principal, negro azabache */
  --et-panel:       #151015;   /* paneles / secciones alternas */
  --et-panel-2:     #1C151A;   /* tarjetas */

  /* Acción y acento */
  --et-carmesi:      #A62639;   /* botones y color de acción */
  --et-carmesi-hi:    #C23048;   /* hover del carmesí */
  --et-dorado:       #D4AF37;   /* detalles, bordes, íconos */
  --et-dorado-soft:  rgba(212,175,55,.22);

  /* Texto */
  --et-hueso:      #F7F3EA;   /* texto principal sobre fondo oscuro */
  --et-humo:       #8A8280;   /* texto secundario / muted */

  /* Tipografía */
  --et-font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --et-font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --et-max: 1120px;
  --et-radio-carta: 170px 170px 18px 18px; /* firma visual: arco de carta de tarot */
}

/* =========================================================================
   BASE
   ========================================================================= */
body{
  background: var(--et-noche);
  color: var(--et-hueso);
  font-family: var(--et-font-sans);
  font-weight: 300;
  line-height: 1.7;
}
a{ color: var(--et-dorado); }
a:hover{ color: var(--et-carmesi-hi); }

h1,h2,h3,h4,h5,h6,
.entry-title,
.entry-title a,
.site-title,
.site-title a,
.wp-block-heading,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4{
  font-family: var(--et-font-serif) !important;
  font-weight: 500;
  line-height: 1.15;
  color: var(--et-hueso) !important;
}
h1 em, h2 em, h3 em,
.wp-block-heading em{
  font-style: italic;
  color: var(--et-dorado) !important;
}

/* =========================================================================
   PORTADA: ocultar el título de la página
   En la home, el titular del hero cumple la función de encabezado; el
   título "Inicio" solo resta protagonismo. (También se puede desactivar
   por página desde el panel lateral de Astra.)
   ========================================================================= */
.home .entry-header,
.home .page-title,
.home .ast-single-entry-banner,
.page-template-default.home .entry-header{
  display: none !important;
}

.entry-content p{ color: var(--et-hueso); }

/* =========================================================================
   CONTENEDORES DE CONTENIDO (Astra)
   Astra pinta de blanco sus wrappers de contenido por defecto, sin importar
   el layout elegido (ancho completo, en caja o "contenedores separados").
   Los volvemos transparentes para que se vea el negro del <body> debajo,
   y forzamos el color de texto donde haga falta con !important porque
   Astra a veces trae su propia especificidad alta.
   ========================================================================= */
html, body{
  background-color: var(--et-noche) !important;
}
#page,
.site,
#content,
.site-content,
.ast-container,
.ast-container-fluid,
.ast-separate-container,
.ast-plain-container,
.ast-page-builder-template,
.ast-narrow-container,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .site-content,
.ast-separate-container .ast-comment-list li,
#primary,
.content-area,
#main,
.site-main,
article,
.hentry,
.entry-content,
.page .entry-content,
.entry-header,
.page-header,
.ast-archive-title,
.ast-breadcrumbs-container,
.comments-area,
.widget-area,
#secondary{
  background-color: transparent !important;
}
.entry-content,
.entry-content p,
.entry-content li,
.entry-content span,
.entry-content blockquote,
.page-title,
.entry-title,
.entry-title a,
.ast-archive-title{
  color: var(--et-hueso) !important;
}
.entry-content blockquote{
  border-color: var(--et-dorado-soft) !important;
}

/* Eyebrow / etiqueta de sección — usar clase "et-eyebrow" en un bloque de texto */
.et-eyebrow{
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--et-dorado);
  font-weight: 500;
}

/* =========================================================================
   HEADER (Astra)
   ========================================================================= */
.ast-above-header-wrap,
.ast-primary-header-bar,
.site-header,
.main-header-bar{
  background-color: var(--et-noche) !important;
  border-color: rgba(212,175,55,.14) !important;
}
.main-header-bar.navigation-accent-color-h-bg,
.ast-primary-header-bar .site-title a,
.ast-primary-header-bar .ast-header-navigation-arrow{
  color: var(--et-hueso) !important;
}
.main-navigation .menu-item a,
.ast-header-navigation-arrow{
  color: var(--et-hueso) !important;
  opacity: .9;
}
.main-navigation .menu-item a:hover{
  color: var(--et-dorado) !important;
  opacity: 1;
}

/* =========================================================================
   BOTONES
   Clases utilitarias: .et-btn.et-btn-primary  /  .et-btn.et-btn-outline
   También se re-estilan los botones nativos de Gutenberg y Astra.
   ========================================================================= */
.et-btn,
.wp-block-button__link,
.ast-button,
button[type="submit"]{
  display: inline-block;
  box-sizing: border-box;
  font-family: var(--et-font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
  border-radius: 999px;
  padding: 13px 28px;
  transition: transform .2s ease, background .2s ease;
  border: none;
  cursor: pointer;
}
.et-btn:hover,
.wp-block-button__link:hover,
.ast-button:hover{
  transform: translateY(-2px);
}

.et-btn-primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.ast-button{
  background: var(--et-carmesi) !important;
  color: #FFF6F0 !important;
  /* Filete en el tono hover: eleva el contraste del contorno del botón
     contra el fondo negro a 3.58:1 (WCAG 1.4.11 exige 3:1 para
     componentes de interfaz) sin alterar el carmesí de marca. */
  border: 1px solid var(--et-carmesi-hi) !important;
}
.et-btn-primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.ast-button:hover{
  background: var(--et-carmesi-hi) !important;
}

.et-btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link{
  background: transparent !important;
  border: 1px solid var(--et-dorado) !important;
  color: var(--et-dorado) !important;
}

/* Accesibilidad: foco visible para navegación por teclado.
   Sin esto, quien navega con Tab no ve dónde está parado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.et-btn:focus-visible,
.wp-block-button__link:focus-visible{
  outline: 2px solid var(--et-dorado) !important;
  outline-offset: 3px !important;
}

/* =========================================================================
   TARJETAS — firma visual "arco de carta de tarot"
   Clase: .et-card  (usar en un Group block de Gutenberg)
   ========================================================================= */
.et-card{
  background: var(--et-panel-2);
  border: 1px solid var(--et-dorado-soft);
  border-radius: var(--et-radio-carta);
  padding: 40px 24px 28px;
  text-align: center;
}
.et-card.et-card-destacada{
  border-color: var(--et-carmesi);
  box-shadow: 0 0 46px -18px rgba(166,38,57,.55);
}

/* =========================================================================
   SECCIONES ALTERNAS
   Clase: .et-panel  (usar en un Group/Cover block para alternar fondos)
   ========================================================================= */
.et-panel{
  background: var(--et-panel);
  border-top: 1px solid rgba(212,175,55,.12);
  border-bottom: 1px solid rgba(212,175,55,.12);
}

/* =========================================================================
   FOOTER
   Astra 3.0+ usa el "Footer Builder", con clases distintas al footer
   clásico. Cubrimos ambas estructuras para que la barra de copyright
   no quede blanca.
   ========================================================================= */
.ast-small-footer,
footer.site-footer,
.site-footer,
.site-above-footer-wrap,
.site-primary-footer-wrap,
.site-below-footer-wrap,
.ast-builder-grid-row-container,
.ast-builder-grid-row,
.footer-widget-area,
.ast-footer-copyright,
.ast-builder-html-element{
  background-color: var(--et-noche) !important;
  color: var(--et-humo) !important;
}
.site-footer,
.site-below-footer-wrap{
  border-top: 1px solid rgba(212,175,55,.14);
}
.ast-small-footer a,
.site-footer a,
.ast-footer-copyright a,
.site-below-footer-wrap a{
  color: var(--et-dorado) !important;
}
.ast-small-footer a:hover,
.site-footer a:hover,
.ast-footer-copyright a:hover,
.site-below-footer-wrap a:hover{
  color: var(--et-carmesi-hi) !important;
}
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title{
  color: var(--et-hueso) !important;
}

/* =========================================================================
   WIDGET DE DISPONIBILIDAD EN VIVO
   Insertado por el shortcode [et_disponibilidad] — ver functions.php

   La banda es el FONDO de la tarjeta; una capa interior tapa el centro y
   deja ver solo el contorno. Se hace así y no con "border" porque los
   bordes no admiten degradados animados.

   Colores de la marca en lugar de un arcoíris: el efecto de "algo vivo"
   lo da el movimiento, no la cantidad de colores.
   ========================================================================= */
.et-estado{
  position: relative;
  z-index: 0;
  margin-top: 20px;
  border: none;
  border-radius: 16px;
  padding: 20px 22px;
  font-size: 13px;
  line-height: 1.55;
  max-width: 420px;
  text-align: left !important;

  /* La banda */
  background: linear-gradient(115deg,
    #7E1F2E 0%,
    var(--et-dorado) 18%,
    var(--et-carmesi) 34%,
    #8C7327 52%,
    var(--et-carmesi-hi) 70%,
    var(--et-dorado) 86%,
    #7E1F2E 100%);
  background-size: 300% 300%;
  animation: et-borde-vivo 9s linear infinite;
}
/* Capa interior: tapa el centro y deja la banda visible en el contorno */
.et-estado::before{
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: 14px;
  background: var(--et-panel-2);
}
@keyframes et-borde-vivo{
  0%   { background-position:   0% 50%; }
  100% { background-position: 300% 50%; }
}

/* --- En horario de consulta: más presencia --- */
.et-estado.et-on{
  padding: 22px 24px;
  border-radius: 18px;
  background: linear-gradient(115deg,
    #3DBB6E 0%,
    var(--et-dorado) 16%,
    #6FD79A 30%,
    var(--et-carmesi-hi) 48%,
    var(--et-dorado) 64%,
    #3DBB6E 80%,
    var(--et-dorado) 100%);
  background-size: 300% 300%;
  animation: et-borde-vivo 4.5s linear infinite;
  box-shadow:
    0 0 46px -18px rgba(61,187,110,.75),
    0 0 90px -40px rgba(212,175,55,.6);
}
.et-estado.et-on::before{
  inset: 3px;
  border-radius: 15px;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(61,187,110,.10), transparent 60%),
    var(--et-panel-2);
}

.et-estado .et-fila{
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-weight: 500;
  color: var(--et-hueso);
  text-align: left !important;
}
.et-estado .et-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  margin-top: 6px;
}
.et-estado.et-on .et-dot{
  width: 11px;
  height: 11px;
  background: #3DBB6E;
}
.et-estado.et-off .et-dot{
  background: #6E6A68;
}
.et-estado .et-det{
  color: var(--et-humo);
  margin-top: 7px;
  padding-left: 21px;
  font-size: 12.5px;
  text-align: left !important;
}
@media (prefers-reduced-motion: no-preference){
  .et-estado.et-on .et-dot{ animation: et-latido 2s infinite; }
  @keyframes et-latido{
    0%{ box-shadow: 0 0 0 0 rgba(61,187,110,.55); }
    70%{ box-shadow: 0 0 0 11px rgba(61,187,110,0); }
    100%{ box-shadow: 0 0 0 0 rgba(61,187,110,0); }
  }
}
@media (prefers-reduced-motion: reduce){
  .et-estado,
  .et-estado.et-on{ animation: none !important; }
}

/* =========================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   Insertado automáticamente en el footer — ver functions.php
   ========================================================================= */
.et-wa-flotante{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999;
  width: 74px;
  height: 74px;
  display: block;
  line-height: 0;
  text-decoration: none;
  /* Sin background, sin border-radius y sin box-shadow: los trae el SVG */
  transition: transform .25s var(--et-resorte);
}

.et-wa-flotante:hover{
  transform: translateY(-3px) scale(1.05);
}

.et-wa-flotante svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Foco visible para navegación por teclado. Como el logo no es un
   círculo perfecto (tiene la punta de la burbuja), el anillo va
   redondeado pero no circular. */
.et-wa-flotante:focus-visible{
  outline: 2px solid var(--et-dorado);
  outline-offset: 4px;
  border-radius: 14px;
}

/* El pulso de atención: antes era un anillo circular calcado al botón.
   Con el logo real conviene un halo verde difuso, que acompaña la
   forma de la burbuja en vez de contradecirla. */
.et-wa-flotante::before{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(37, 211, 102, .45);
  z-index: -1;
  animation: et-pulso 2.8s ease-out infinite;
}

@keyframes et-pulso{
  0%  { transform: scale(.9); opacity: .55; }
  70% { transform: scale(1.45); opacity: 0; }
  100%{ transform: scale(1.45); opacity: 0; }
}

@media (max-width: 600px){
  .et-wa-flotante{
    right: 16px;
    bottom: 16px;
    width: 62px;
    height: 62px;
  }
}

/* (El apagado por "menos movimiento" lo cubre el bloque global
   de la sección de animaciones.) */

/* =========================================================================
   SECCIÓN: estructura estándar reutilizable
   .et-seccion  → espaciado vertical uniforme de todas las secciones
   .et-panel    → fondo alterno (ya definido más arriba)
   ========================================================================= */
.et-seccion{
  padding: 96px 24px !important;
}
/* =========================================================================
   SECCIONES DE ANCHO COMPLETO
   La plantilla de página correcta es "Ancho completo / Estirado", que
   quita el contenedor de Astra. Esto es un respaldo por si la plantilla
   quedó en "Contenido": anula el ancho máximo y el relleno lateral del
   contenedor SOLO en el área de contenido de la portada.

   Importante: no debe alcanzar al encabezado ni al pie, que usan la
   misma clase .ast-container. Si se les quita el relleno, el logo y el
   menú quedan pegados a los bordes de la ventana.
   ========================================================================= */
.home .site-content > .ast-container,
.home #content > .ast-container{
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Encabezado y pie conservan su relleno, alineados al mismo eje que las
   secciones (1120 px de contenido + 24 px de aire a cada lado). */
.site-header .ast-container,
.ast-primary-header-bar .ast-container,
.main-header-bar .ast-container,
.site-footer .ast-container,
.site-primary-footer-wrap .ast-container,
.site-below-footer-wrap .ast-container{
  max-width: 1168px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.home #primary,
.home .content-area,
.home .site-main,
.home .entry-content{
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* Astra aplica relleno lateral al <article> en la plantilla de ancho
   completo (.ast-page-builder-template .site-main > article). Es el
   causante del borde a los costados de las secciones. */
.ast-page-builder-template .site-main > article,
.ast-single-post.ast-page-builder-template .site-main > article,
.ast-page-builder-template .post-navigation,
.home .site-main > article,
.home article.page,
.home .hentry{
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}
/* El relleno lateral ya lo aporta cada sección (.et-seccion / .et-hero),
   así que el texto sigue sin pegarse a los bordes. */

.et-seccion h2{
  font-size: clamp(28px, 4vw, 40px) !important;
  /* Solo se fijan los márgenes verticales: poner "0" en los laterales
     bloquea el centrado como bloque (margin-left/right: auto). */
  margin-top: 14px !important;
  margin-bottom: 18px !important;
}

/* Línea divisoria automática: cuando dos secciones seguidas comparten
   el mismo fondo se funden en un bloque largo, así que se separan con
   un filete. Vale para cualquier sección que se agregue en el futuro. */
.et-seccion:not(.et-panel) + .et-seccion:not(.et-panel),
.et-hero + .et-seccion:not(.et-panel){
  border-top: 1px solid rgba(212,175,55,.11);
}
.et-seccion .et-intro{
  color: var(--et-humo) !important;
  font-size: 16.5px !important;
  max-width: 620px;
}

/* Bloques diferenciadores con filete carmesí */
.et-dif{
  border-left: 2px solid var(--et-carmesi);
  padding: 2px 0 2px 20px !important;
  margin-bottom: 22px !important;
}
.et-dif h3{
  font-size: 20px !important;
  margin: 0 0 6px !important;
}
.et-dif p{
  color: var(--et-humo) !important;
  font-size: 14.5px !important;
  margin: 0 !important;
}

@media (max-width: 880px){
  .et-seccion{ padding: 64px 20px !important; }
}

/* =========================================================================
   SECCIÓN: HERO (portada)
   Se usa con el pattern "hero" — ver archivo de bloques entregado.
   ========================================================================= */
.et-hero{
  position: relative;
  overflow: hidden;
  padding: 110px 24px 90px !important;
}
.et-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 68% 30%, rgba(166,38,57,.18), transparent 65%);
  pointer-events: none;
}
.et-hero > *{ position: relative; z-index: 1; }

.et-hero h1{
  font-size: clamp(38px, 5.6vw, 62px) !important;
  margin: 18px 0 22px !important;
  line-height: 1.14 !important;
}
.et-hero .et-sub{
  font-size: 17.5px !important;
  color: #CFC8BC !important;
  max-width: 520px;
  margin-bottom: 34px !important;
}

/* Sellos de confianza bajo los botones */
.et-trust{
  display: flex;
  gap: 12px 28px;
  flex-wrap: wrap;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--et-humo) !important;
  margin-top: 34px !important;
}
.et-trust span{ display: inline-flex; align-items: center; }
.et-trust span::before{
  content: "✦";
  color: var(--et-carmesi);
  margin-right: 9px;
  font-size: 13px;
}

/* Marco "arco de carta de tarot" para el retrato */
.et-carta{
  position: relative;
  border: 1px solid var(--et-dorado-soft);
  border-radius: var(--et-radio-carta);
  padding: 12px;
  background: linear-gradient(180deg, rgba(212,175,55,.05), transparent 40%);
  max-width: 360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.et-carta::after{
  content: "✶";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--et-dorado);
  background: var(--et-noche);
  padding: 0 10px;
  font-size: 16px;
  line-height: 1;
}
.et-carta img{
  border-radius: 160px 160px 10px 10px;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 4.1;
}
/* Placeholder mientras no hay foto definitiva */
.et-carta-ph{
  border-radius: 160px 160px 10px 10px;
  aspect-ratio: 3 / 4.1;
  background: linear-gradient(160deg, #181116, #100b0e);
  border: 1px dashed var(--et-dorado-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--et-humo);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.7;
  padding: 20px;
}
@media (max-width: 880px){
  .et-hero{ padding: 70px 20px 64px !important; }
  .et-carta{ max-width: 320px; margin-top: 40px; }
}

/* =========================================================================
   SECCIÓN: SERVICIOS Y PRECIOS
   ========================================================================= */
/* Las columnas se estiran a la misma altura y el botón de cada tarjeta se
   ancla abajo, así quedan todos alineados aunque una tarjeta tenga una
   línea de más (el precio de lanzamiento). */
.et-seccion .wp-block-columns{
  align-items: stretch !important;
}
.et-seccion .wp-block-column{
  display: flex !important;
  flex-direction: column;
}
.et-card{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.et-card p{
  flex: 1 1 auto !important;
}
.et-card .wp-block-buttons{
  margin-top: auto !important;
  padding-top: 4px;
  justify-content: center;
}
.et-card h3{
  font-size: 21px !important;
  margin: 0 0 4px !important;
}
.et-card .et-dur{
  font-size: 11.5px !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--et-humo) !important;
  margin: 0 0 14px !important;
}
.et-card p{
  font-size: 14px !important;
  color: #BDB4AA !important;
}
.et-precio{
  font-family: var(--et-font-serif);
  font-size: 30px;
  color: var(--et-dorado);
  margin: 18px 0 6px;
  line-height: 1.2;
}
.et-precio s{
  color: var(--et-humo);
  font-size: 19px;
  margin-right: 8px;
}
.et-precio small{
  font-size: 14px;
  color: var(--et-humo);
  font-family: var(--et-font-sans);
}
.et-lanzamiento{
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--et-dorado);
  margin: 0 0 16px;
}
.et-nota{
  text-align: center;
  font-size: 13px;
  color: var(--et-humo) !important;
  margin-top: 26px !important;
}

/* =========================================================================
   SECCIÓN: CON QUÉ LLEGA LA GENTE (temas de consulta)
   ========================================================================= */
.et-tema{
  border-top: 1px solid var(--et-dorado-soft);
  padding-top: 20px !important;
  margin-bottom: 26px !important;
  transition: border-color .4s var(--et-suave);
}
.et-tema:hover{
  border-top-color: var(--et-dorado);
}
.et-tema h3{
  font-size: 19px !important;
  margin: 0 0 8px !important;
}
.et-tema p{
  font-size: 14.5px !important;
  color: var(--et-humo) !important;
  margin: 0 !important;
}

/* =========================================================================
   SECCIÓN: CÓMO ES UNA SESIÓN (pasos numerados)
   ========================================================================= */
.et-paso .et-num{
  font-family: var(--et-font-serif);
  font-size: 46px;
  color: var(--et-carmesi);
  line-height: 1;
  margin: 0 0 8px;
}
.et-paso h3{
  font-size: 20px !important;
  margin: 0 0 8px !important;
}
.et-paso p{
  font-size: 14.5px !important;
  color: var(--et-humo) !important;
  margin: 0 !important;
}

/* =========================================================================
   SECCIÓN: MI HISTORIA
   ========================================================================= */
.et-retrato img{
  border-radius: 14px;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
.et-retrato-ph{
  border-radius: 14px;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #181116, #100b0e);
  border: 1px dashed var(--et-dorado-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--et-humo);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.7;
  padding: 20px;
}
.et-cita{
  font-family: var(--et-font-serif) !important;
  font-style: italic;
  font-size: 21px !important;
  color: var(--et-dorado) !important;
  border-left: 2px solid var(--et-carmesi);
  padding-left: 20px !important;
  margin: 22px 0 !important;
}
.et-video-ph{
  border-radius: 12px;
  aspect-ratio: 16 / 7;
  background: linear-gradient(160deg, #181116, #100b0e);
  border: 1px dashed var(--et-dorado-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--et-humo);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 20px;
  margin-top: 26px;
}

/* =========================================================================
   BANDA DE VIDEO
   El video de presentación es apaisado (16:9) con los laterales rellenos
   por desenfoque. Antes era vertical de celular y había reglas que lo
   recortaban a 9:16 con object-fit:cover — se eliminaron, porque eran
   las que obligaban a poner estilos incrustados en el bloque.
   ========================================================================= */
.et-video{
  max-width: 880px;
  margin: 0 auto;
}
.et-video-player{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--et-noche);
  border: 1px solid var(--et-dorado-soft);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(11, 10, 12, .45);
}
.et-video-player:focus-visible{
  border-color: var(--et-dorado);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .35), 0 18px 48px rgba(11, 10, 12, .45);
}
.et-video-pie{
  margin: .9rem 0 0;
  text-align: center;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--et-humo);
  font-style: italic;
}
@media (max-width: 782px){
  .et-video{ max-width: 100%; }
  .et-video-player{ border-radius: 8px; }
  .et-video-pie{ font-size: .86rem; }
}

/* =========================================================================
   SUBTÍTULOS DEL VIDEO
   El navegador los dibuja con su estilo por defecto: fondo negro opaco y
   tipografía del sistema. Con ::cue se los alinea a la identidad del
   sitio. Solo admite un puñado de propiedades: color, fondo, tipografía,
   tamaño y sombra.
   ========================================================================= */
video::cue{
  font-family: var(--et-font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--et-hueso);
  background-color: rgba(11, 10, 12, .74);
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
@media (max-width: 600px){
  video::cue{ font-size: .9rem; }
}

/* Banda dedicada al video de presentación */
.et-banda-video .et-intro{
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 34px !important;
}
.et-slot-video{
  border: 1px dashed var(--et-dorado-soft);
  border-radius: 18px;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--et-humo) !important;
  font-size: 12px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 20px;
  margin: 0 !important;
}

/* =========================================================================
   ALINEACIÓN
   Todas las secciones comparten el mismo ancho de contenedor (1120 px).
   A partir de ahí, cada sección define explícitamente si centra o no —
   sin depender de la herencia, que es lo que hacía fallar el centrado.
   ========================================================================= */
.et-seccion > *{
  max-width: var(--et-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- SECCIONES CENTRADAS ---------------------------------------------
   Sesiones · Banda de video · Testimonios · Llamado final
   -------------------------------------------------------------------- */
.et-seccion .et-center,
.et-seccion .et-center > *,
.et-seccion .et-center h2,
.et-seccion .et-center p,
.et-banda-video,
.et-banda-video > *,
.et-banda-video h2,
.et-banda-video p,
.et-final,
.et-final > *,
.et-final h2,
.et-final p{
  text-align: center !important;
}
.et-seccion .et-center > *,
.et-banda-video > *,
.et-final > *{
  margin-left: auto !important;
  margin-right: auto !important;
}
.et-nota{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.et-final .wp-block-buttons,
.et-banda-video .wp-block-buttons{
  justify-content: center !important;
}

/* --- PREGUNTAS FRECUENTES --------------------------------------------
   El título va alineado al eje del hero; el acordeón va centrado.
   -------------------------------------------------------------------- */
#preguntas > *,
#dudas > *{
  max-width: var(--et-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#preguntas .et-eyebrow,
#preguntas h2,
#dudas .et-eyebrow,
#dudas h2{
  text-align: left !important;
}
#preguntas .et-faq,
#dudas .et-faq{
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Dentro de las tarjetas todo sigue centrado */
.et-card,
.et-card *{
  text-align: center !important;
}
.et-card .wp-block-buttons{
  justify-content: center !important;
}

/* =========================================================================
   SECCIÓN: TESTIMONIOS
   ========================================================================= */
.et-testi{
  background: var(--et-panel-2);
  border: 1px solid var(--et-dorado-soft);
  border-radius: 14px;
  padding: 28px !important;
  height: 100%;
}
.et-testi.et-testi-pendiente{
  border-style: dashed;
}
.et-testi .et-comilla{
  font-family: var(--et-font-serif);
  font-size: 34px;
  color: var(--et-carmesi);
  line-height: 1;
  margin: 0 0 10px;
}
.et-testi p{
  font-size: 14.5px !important;
  color: var(--et-humo) !important;
}
.et-testi .et-autor{
  margin-top: 16px !important;
  font-size: 12px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--et-dorado) !important;
}

/* =========================================================================
   SECCIÓN: PREGUNTAS FRECUENTES
   ========================================================================= */
.et-faq details{
  border-bottom: 1px solid rgba(212,175,55,.14);
  padding: 20px 4px;
}
.et-faq summary{
  cursor: pointer;
  font-family: var(--et-font-serif);
  font-size: 20px;
  color: var(--et-hueso);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.et-faq summary::-webkit-details-marker{ display: none; }
.et-faq summary::after{
  content: "+";
  color: var(--et-carmesi);
  font-family: var(--et-font-sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  flex: none;
}
.et-faq details[open] summary::after{ content: "–"; }
.et-faq details p{
  margin-top: 12px;
  color: var(--et-humo);
  font-size: 15px;
  max-width: 760px;
}

/* =========================================================================
   SECCIÓN: LLAMADO FINAL
   ========================================================================= */
.et-final{
  position: relative;
  overflow: hidden;
  text-align: center;
}
.et-final::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(166,38,57,.18), transparent 70%);
  pointer-events: none;
}
.et-final > *{ position: relative; z-index: 1; }
.et-final h2{ font-size: clamp(30px, 4.6vw, 46px) !important; }
.et-final .et-sub-final{
  color: var(--et-humo) !important;
  max-width: 560px;
  margin: 0 auto 34px !important;
}
.et-final .et-alt{
  margin-top: 18px !important;
  font-size: 13.5px !important;
  color: var(--et-humo) !important;
}
.et-cal-ph{
  max-width: 760px;
  margin: 44px auto 0;
  aspect-ratio: 16 / 6;
  border-radius: 12px;
  background: linear-gradient(160deg, #181116, #100b0e);
  border: 1px dashed var(--et-dorado-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--et-humo);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.7;
  padding: 20px;
}

/* =========================================================================
   MOVIMIENTO Y MICRO-INTERACCIONES
   Curvas de animación propias: nada de "linear", que se siente robótico.
   --et-suave  → entradas y salidas naturales
   --et-resorte → un pequeño rebote al final, para los hover
   ========================================================================= */
:root{
  --et-suave: cubic-bezier(.22,.61,.36,1);
  --et-resorte: cubic-bezier(.34,1.56,.64,1);
}

/* ---- Revelado progresivo al hacer scroll ---- */
.et-reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--et-suave), transform .75s var(--et-suave);
  will-change: opacity, transform;
}
.et-reveal.et-visible{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .et-reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- BOTONES: barrido dorado + elevación + halo ---- */
.et-btn,
.wp-block-button__link,
.ast-button{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .35s var(--et-resorte),
    box-shadow .35s var(--et-suave),
    background-color .3s var(--et-suave),
    border-color .3s var(--et-suave),
    color .3s var(--et-suave) !important;
}
/* El barrido: una franja de luz que cruza el botón al pasar el mouse */
.et-btn::before,
.wp-block-button__link::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg,
    transparent 20%,
    rgba(212,175,55,.32) 48%,
    rgba(247,243,234,.20) 54%,
    transparent 80%);
  transform: translateX(-120%);
  transition: transform .75s var(--et-suave);
}
.et-btn:hover::before,
.wp-block-button__link:hover::before{
  transform: translateX(120%);
}

/* Botón principal: se eleva y proyecta un halo carmesí */
.et-btn-primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.ast-button:hover{
  transform: translateY(-3px) !important;
  box-shadow:
    0 14px 30px -12px rgba(166,38,57,.75),
    0 0 0 1px rgba(212,175,55,.35) inset !important;
}
.et-btn-primary:active,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:active{
  transform: translateY(-1px) !important;
  transition-duration: .08s !important;
}

/* Botón de contorno: el dorado se llena desde abajo */
.et-btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link{
  position: relative;
  z-index: 0;
  transition: color .35s var(--et-suave), transform .35s var(--et-resorte), box-shadow .35s var(--et-suave) !important;
}
.et-btn-outline::after,
.wp-block-button.is-style-outline .wp-block-button__link::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--et-dorado);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s var(--et-suave);
  border-radius: inherit;
}
.et-btn-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  color: var(--et-noche) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 28px -14px rgba(212,175,55,.7) !important;
}
.et-btn-outline:hover::after,
.wp-block-button.is-style-outline .wp-block-button__link:hover::after{
  transform: scaleY(1);
}

/* ---- TARJETAS: elevación, borde que se enciende y brillo que sigue al cursor ---- */
.et-card,
.et-testi{
  position: relative;
  --mx: 50%;
  --my: 0%;
  transition:
    transform .45s var(--et-suave),
    border-color .45s var(--et-suave),
    box-shadow .45s var(--et-suave);
}
.et-card::after,
.et-testi::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(320px circle at var(--mx) var(--my),
    rgba(212,175,55,.10), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--et-suave);
}
.et-card:hover,
.et-testi:hover{
  transform: translateY(-6px);
  border-color: rgba(212,175,55,.5);
  box-shadow: 0 26px 46px -26px rgba(0,0,0,.9);
}
.et-card:hover::after,
.et-testi:hover::after{ opacity: 1; }

.et-card.et-card-destacada:hover{
  border-color: var(--et-carmesi-hi);
  box-shadow:
    0 26px 50px -24px rgba(0,0,0,.9),
    0 0 60px -24px rgba(166,38,57,.75);
}

/* ---- BLOQUES DIFERENCIADORES: el filete crece al pasar ---- */
.et-dif{
  position: relative;
  border-left-color: rgba(166,38,57,.45);
  transition: border-color .4s var(--et-suave), transform .4s var(--et-suave);
}
.et-dif::before{
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--et-dorado);
  transition: height .5s var(--et-suave);
}
.et-dif:hover{
  border-left-color: var(--et-carmesi);
  transform: translateX(4px);
}
.et-dif:hover::before{ height: 100%; }

/* ---- MARCO DE CARTA: respiración lenta del halo ---- */
.et-carta{
  transition: transform .6s var(--et-suave), box-shadow .6s var(--et-suave);
}
.et-carta:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.95);
}
.et-carta::after{
  animation: et-respira 4.5s ease-in-out infinite;
}
@keyframes et-respira{
  0%, 100%{ opacity: .75; transform: translateX(-50%) scale(1); }
  50%     { opacity: 1;   transform: translateX(-50%) scale(1.14); }
}

/* ---- HERO: el resplandor se desplaza muy lentamente ---- */
.et-hero::before{
  animation: et-deriva 18s ease-in-out infinite alternate;
}
@keyframes et-deriva{
  from{ transform: translate3d(-2%, -1%, 0) scale(1); }
  to  { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* ---- NAVEGACIÓN: subrayado que se dibuja ---- */
.main-navigation .menu-item > a{
  position: relative;
  transition: color .3s var(--et-suave);
}
.main-navigation .menu-item > a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: var(--et-dorado);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--et-suave);
}
.main-navigation .menu-item > a:hover::after,
.main-navigation .current-menu-item > a::after{
  transform: scaleX(1);
  transform-origin: left;
}

/* ---- HEADER que se compacta al bajar ---- */
.site-header,
#masthead{
  transition: background-color .4s var(--et-suave), box-shadow .4s var(--et-suave), backdrop-filter .4s var(--et-suave);
}
.site-header.et-compacto,
#masthead.et-compacto{
  background-color: rgba(11,10,12,.86) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -20px rgba(0,0,0,.95);
}

/* ---- ENLACES de texto: subrayado que crece ---- */
.entry-content a:not(.wp-block-button__link):not(.et-btn){
  background-image: linear-gradient(var(--et-carmesi-hi), var(--et-carmesi-hi));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s var(--et-suave), color .3s var(--et-suave);
  text-decoration: none;
}
.entry-content a:not(.wp-block-button__link):not(.et-btn):hover{
  background-size: 100% 1px;
}

/* ---- PREGUNTAS FRECUENTES: apertura suave y signo que gira ---- */
.et-faq details{
  transition: background-color .35s var(--et-suave);
}
.et-faq details:hover{
  background-color: rgba(212,175,55,.03);
}
.et-faq summary{
  transition: color .3s var(--et-suave);
}
.et-faq summary:hover{ color: var(--et-dorado); }
.et-faq summary::after{
  transition: transform .35s var(--et-resorte), color .3s var(--et-suave);
}
.et-faq details[open] summary::after{
  transform: rotate(180deg);
}
.et-faq details[open] p{
  animation: et-desplegar .45s var(--et-suave);
}
@keyframes et-desplegar{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: none; }
}

/* ---- PASOS: el número se ilumina ---- */
.et-paso .et-num{
  transition: color .45s var(--et-suave), transform .45s var(--et-resorte);
}
.et-paso:hover .et-num{
  color: var(--et-dorado);
  transform: translateY(-3px) scale(1.06);
}

/* El pulso del botón de WhatsApp vive ahora junto al botón,
   en su propia sección más arriba. */

/* ---- Al pedir menos movimiento, se apaga todo lo decorativo ---- */
@media (prefers-reduced-motion: reduce){
  .et-carta::after,
  .et-hero::before,
  .et-wa-flotante::before{
    animation: none !important;
  }
  .et-btn::before,
  .wp-block-button__link::before{ display: none; }
  *{ transition-duration: .01ms !important; }
}

/* =========================================================================
   FOOTER — columnas, títulos y redes
   ========================================================================= */
.site-footer .widget-title,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-primary-footer-wrap .widget-title{
  font-family: var(--et-font-sans) !important;
  font-size: 11px !important;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--et-dorado) !important;
  font-weight: 500 !important;
  margin-bottom: 16px !important;
}
.site-footer p,
.site-footer li,
.site-primary-footer-wrap p,
.site-primary-footer-wrap li{
  font-size: 13.5px !important;
  color: var(--et-humo) !important;
  line-height: 1.9;
}
.site-footer ul{
  list-style: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.site-footer .menu-item a{
  color: var(--et-humo) !important;
  text-decoration: none;
  transition: color .3s var(--et-suave);
}
.site-footer .menu-item a:hover{
  color: var(--et-dorado) !important;
}

/* Marca en el pie */
.et-footer-marca{
  font-family: var(--et-font-serif);
  font-size: 22px;
  color: var(--et-hueso);
  line-height: 1.2;
  display: block;
  margin-bottom: 4px;
}
.et-footer-marca small{
  display: block;
  font-family: var(--et-font-sans);
  font-size: 9.5px;
  letter-spacing: .42em;
  color: var(--et-dorado);
  text-transform: uppercase;
  margin-top: 3px;
}

/* Redes sociales */
.et-redes{
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.et-redes a{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--et-dorado-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--et-humo) !important;
  text-decoration: none;
  transition: transform .3s var(--et-resorte), border-color .3s var(--et-suave), color .3s var(--et-suave), background-color .3s var(--et-suave);
}
.et-redes a:hover{
  transform: translateY(-3px);
  border-color: var(--et-dorado);
  color: var(--et-dorado) !important;
  background: rgba(212,175,55,.06);
}
.et-redes svg{
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* Texto visible solo para lectores de pantalla. Además evita que
   WordPress elimine los enlaces por considerarlos vacíos. */
.et-oculto{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Íconos de redes por CSS ---------------------------------------
   WordPress filtra las etiquetas <svg> de los widgets por seguridad, así
   que los íconos se inyectan como máscara CSS. Ventaja extra: heredan
   el color del enlace, así que cambian solos en el hover.
   -------------------------------------------------------------------- */
.et-redes a::before{
  content: "";
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.et-red-ig::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.16c3.2%200%203.58.01%204.85.07%201.17.05%201.8.25%202.23.41.56.22.96.48%201.38.9.42.42.68.82.9%201.38.16.42.36%201.06.41%202.23.06%201.27.07%201.65.07%204.85s-.01%203.58-.07%204.85c-.05%201.17-.25%201.8-.41%202.23-.22.56-.48.96-.9%201.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17%2015.58%202.16%2015.2%202.16%2012s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68%201.38-.9.42-.16%201.06-.36%202.23-.41C8.42%202.17%208.8%202.16%2012%202.16zm0%202.16c-3.14%200-3.51.01-4.75.07-1.15.05-1.77.24-2.18.4-.55.21-.94.47-1.35.88-.41.41-.67.8-.88%201.35-.16.41-.35%201.03-.4%202.18-.06%201.24-.07%201.61-.07%204.75s.01%203.51.07%204.75c.05%201.15.24%201.77.4%202.18.21.55.47.94.88%201.35.41.41.8.67%201.35.88.41.16%201.03.35%202.18.4%201.24.06%201.61.07%204.75.07s3.51-.01%204.75-.07c1.15-.05%201.77-.24%202.18-.4.55-.21.94-.47%201.35-.88.41-.41.67-.8.88-1.35.16-.41.35-1.03.4-2.18.06-1.24.07-1.61.07-4.75s-.01-3.51-.07-4.75c-.05-1.15-.24-1.77-.4-2.18-.21-.55-.47-.94-.88-1.35-.41-.41-.8-.67-1.35-.88-.41-.16-1.03-.35-2.18-.4-1.24-.06-1.61-.07-4.75-.07zm0%203.68a6%206%200%20110%2012%206%206%200%20010-12zm0%209.89a3.89%203.89%200%20100-7.78%203.89%203.89%200%20000%207.78zm7.64-10.13a1.4%201.4%200%2011-2.8%200%201.4%201.4%200%20012.8%200z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.16c3.2%200%203.58.01%204.85.07%201.17.05%201.8.25%202.23.41.56.22.96.48%201.38.9.42.42.68.82.9%201.38.16.42.36%201.06.41%202.23.06%201.27.07%201.65.07%204.85s-.01%203.58-.07%204.85c-.05%201.17-.25%201.8-.41%202.23-.22.56-.48.96-.9%201.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17%2015.58%202.16%2015.2%202.16%2012s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68%201.38-.9.42-.16%201.06-.36%202.23-.41C8.42%202.17%208.8%202.16%2012%202.16zm0%202.16c-3.14%200-3.51.01-4.75.07-1.15.05-1.77.24-2.18.4-.55.21-.94.47-1.35.88-.41.41-.67.8-.88%201.35-.16.41-.35%201.03-.4%202.18-.06%201.24-.07%201.61-.07%204.75s.01%203.51.07%204.75c.05%201.15.24%201.77.4%202.18.21.55.47.94.88%201.35.41.41.8.67%201.35.88.41.16%201.03.35%202.18.4%201.24.06%201.61.07%204.75.07s3.51-.01%204.75-.07c1.15-.05%201.77-.24%202.18-.4.55-.21.94-.47%201.35-.88.41-.41.67-.8.88-1.35.16-.41.35-1.03.4-2.18.06-1.24.07-1.61.07-4.75s-.01-3.51-.07-4.75c-.05-1.15-.24-1.77-.4-2.18-.21-.55-.47-.94-.88-1.35-.41-.41-.8-.67-1.35-.88-.41-.16-1.03-.35-2.18-.4-1.24-.06-1.61-.07-4.75-.07zm0%203.68a6%206%200%20110%2012%206%206%200%20010-12zm0%209.89a3.89%203.89%200%20100-7.78%203.89%203.89%200%20000%207.78zm7.64-10.13a1.4%201.4%200%2011-2.8%200%201.4%201.4%200%20012.8%200z%22%2F%3E%3C%2Fsvg%3E");
}
.et-red-fb::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M22%2012.06C22%206.5%2017.52%202%2012%202S2%206.5%202%2012.06c0%205.02%203.66%209.18%208.44%209.94v-7.03H7.9v-2.91h2.54V9.85c0-2.52%201.49-3.91%203.77-3.91%201.09%200%202.24.2%202.24.2v2.46h-1.26c-1.24%200-1.63.78-1.63%201.57v1.89h2.78l-.45%202.91h-2.33V22c4.78-.76%208.44-4.92%208.44-9.94z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M22%2012.06C22%206.5%2017.52%202%2012%202S2%206.5%202%2012.06c0%205.02%203.66%209.18%208.44%209.94v-7.03H7.9v-2.91h2.54V9.85c0-2.52%201.49-3.91%203.77-3.91%201.09%200%202.24.2%202.24.2v2.46h-1.26c-1.24%200-1.63.78-1.63%201.57v1.89h2.78l-.45%202.91h-2.33V22c4.78-.76%208.44-4.92%208.44-9.94z%22%2F%3E%3C%2Fsvg%3E");
}

/* --- Alineación del pie ---------------------------------------------
   El constructor de Astra centra las columnas por defecto; en un pie de
   tres columnas eso se lee desprolijo.
   -------------------------------------------------------------------- */
.site-primary-footer-wrap .ast-builder-grid-row > *,
.site-primary-footer-wrap .site-footer-section,
.site-primary-footer-wrap .widget,
.site-footer .widget{
  text-align: left !important;
}
.site-primary-footer-wrap p,
.site-primary-footer-wrap li,
.site-primary-footer-wrap h4,
.site-primary-footer-wrap .widget-title{
  text-align: left !important;
}
.et-redes{
  justify-content: flex-start !important;
}
@media (max-width: 768px){
  .site-primary-footer-wrap .site-footer-section{
    margin-bottom: 34px;
  }
}

/* Bloque de contacto del pie */
.et-contacto-item,
.et-contacto-item *,
.et-contacto-item strong{
  text-align: left !important;
}
.et-contacto-item{
  display: block;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--et-humo);
}
.et-contacto-item strong{
  display: block;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--et-dorado);
  font-weight: 500;
  margin-bottom: 3px;
}
.et-contacto-item a{
  color: var(--et-humo) !important;
  text-decoration: none;
  transition: color .3s var(--et-suave);
}
.et-contacto-item a:hover{
  color: var(--et-dorado) !important;
}

/* --- Elemento "Social" nativo de Astra -------------------------------
   Se usa el componente del theme en lugar de HTML propio: WordPress
   filtra el contenido de los widgets y termina eliminando los enlaces
   de los íconos. Astra los inyecta desde PHP, así que no hay filtro que
   los toque. Acá solo se los viste con la identidad del sitio.
   -------------------------------------------------------------------- */
.ast-footer-social-1-wrap .ast-builder-social-element,
.site-footer .ast-builder-social-element,
.ast-social-stack-desktop .ast-builder-social-element,
.ast-builder-social-element{
  width: 38px !important;
  height: 38px !important;
  margin: 0 10px 0 0 !important;
  border: 1px solid var(--et-dorado-soft) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--et-humo) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .3s var(--et-resorte),
              border-color .3s var(--et-suave),
              color .3s var(--et-suave),
              background-color .3s var(--et-suave) !important;
}
.site-footer .ast-builder-social-element:hover,
.ast-builder-social-element:hover{
  transform: translateY(-3px);
  border-color: var(--et-dorado) !important;
  color: var(--et-dorado) !important;
  background: rgba(212,175,55,.06) !important;
}
.ast-builder-social-element svg,
.ast-builder-social-element .ahfb-svg-iconset svg{
  fill: currentColor !important;
  width: 17px !important;
  height: 17px !important;
}
.ast-footer-social-wrap,
.ast-social-stack-desktop{
  justify-content: flex-start !important;
  text-align: left !important;
}

/* =========================================================================
   ENCABEZADO PEGAJOSO
   Se resuelve por CSS y no con el módulo Sticky de Astra Pro, así
   funciona con o sin licencia activada. El botón "Reservar" acompaña
   todo el scroll, que es lo que más rinde en conversión.
   ========================================================================= */
.site-header,
#masthead{
  position: sticky !important;
  top: 0;
  z-index: 99;
}
.admin-bar .site-header,
.admin-bar #masthead{
  top: 32px;
}
@media (max-width: 782px){
  .admin-bar .site-header,
  .admin-bar #masthead{ top: 0; }
}

/* =========================================================================
   MENÚ MÓVIL
   Astra trae su propio estilo claro para el menú desplegable. Sin esto,
   en celular el panel sale con fondo blanco y los enlaces casi no se
   leen sobre él.
   ========================================================================= */

/* Botón de hamburguesa */
.ast-header-break-point .menu-toggle,
.ast-mobile-menu-trigger-fill,
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-outline,
.ast-button-wrap .menu-toggle{
  background: transparent !important;
  color: var(--et-dorado) !important;
  border: 1px solid var(--et-dorado-soft) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
}
.ast-header-break-point .menu-toggle:hover{
  border-color: var(--et-dorado) !important;
  background: rgba(212,175,55,.06) !important;
}
.menu-toggle .ast-mobile-svg,
.menu-toggle svg,
.ast-mobile-menu-trigger-minimal svg,
.ast-mobile-menu-buttons svg{
  fill: var(--et-dorado) !important;
  color: var(--et-dorado) !important;
}

/* Panel desplegado, en sus dos variantes (desplegable y emergente) */
.ast-header-break-point .main-header-bar-navigation,
.ast-header-break-point .main-navigation,
.ast-header-break-point .main-header-menu,
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-content,
.ast-mobile-header-wrap .main-header-bar-navigation,
.ast-header-break-point .ast-mobile-header-wrap{
  background-color: var(--et-noche) !important;
}
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner{
  background-color: var(--et-noche) !important;
  border-left: 1px solid rgba(212,175,55,.14);
}
.ast-mobile-popup-overlay{
  background: rgba(11,10,12,.86) !important;
}

/* Enlaces del menú móvil */
.ast-header-break-point .main-header-menu .menu-item > a,
.ast-header-break-point .main-navigation .menu-item > a,
.ast-mobile-popup-drawer .menu-item > a,
.ast-mobile-popup-content .menu-item > a{
  color: var(--et-hueso) !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(212,175,55,.10) !important;
  font-size: 16px !important;
  padding: 15px 24px !important;
}
.ast-header-break-point .main-header-menu .menu-item > a:hover,
.ast-mobile-popup-drawer .menu-item > a:hover{
  color: var(--et-dorado) !important;
  background: rgba(212,175,55,.04) !important;
}
.ast-header-break-point .main-header-menu .current-menu-item > a,
.ast-mobile-popup-drawer .current-menu-item > a{
  color: var(--et-dorado) !important;
}
/* Sin el subrayado animado del menú de escritorio */
.ast-header-break-point .main-navigation .menu-item > a::after{
  display: none !important;
}
/* Flechas de submenú, si las hubiera */
.ast-header-break-point .ast-menu-toggle,
.ast-mobile-popup-drawer .ast-menu-toggle{
  color: var(--et-dorado) !important;
}
/* Cerrar (la X) */
.ast-mobile-popup-drawer .menu-toggle-close,
.ast-mobile-popup-header .menu-toggle-close{
  color: var(--et-dorado) !important;
}

/* =========================================================================
   MARCA DEL ENCABEZADO
   Mismo bloque que el pie: nombre en serif y "TAROT" debajo en
   versalitas doradas. Se arma con el título del sitio más la
   descripción corta, ambos nativos de WordPress:
     Ajustes → Generales → Título: "Eduardo Tabeira"
                           Descripción corta: "Tarot"
     Personalizar → Encabezado → Identidad del sitio → mostrar la
                    descripción corta.
   ========================================================================= */
.site-header .site-title,
.ast-site-identity .site-title,
.site-title a{
  font-family: var(--et-font-serif) !important;
  /* Para ajustar el tamaño de la marca, cambiar solo este valor. */
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: .01em;
  color: var(--et-hueso) !important;
  margin: 0 !important;
  text-decoration: none;
}
.site-header .site-description,
.ast-site-identity .site-description{
  font-family: var(--et-font-sans) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .46em !important;
  text-transform: uppercase;
  color: var(--et-dorado) !important;
  margin: 4px 0 0 !important;
  line-height: 1.2 !important;
}
.ast-site-identity{
  padding: 0 !important;
}
/* Al compactarse el encabezado en el scroll, la marca se achica un poco */
.site-header.et-compacto .site-title,
#masthead.et-compacto .site-title{
  font-size: 24px !important;
  transition: font-size .35s var(--et-suave);
}

/* =========================================================================
   HEADER — botón de reserva en el menú
   Astra da a los enlaces del menú un line-height igual a la altura del
   encabezado. Si no se anula, el padding se suma y el botón queda
   gigante. Por eso se fija altura propia y se centra con flex.
   ========================================================================= */
li.et-menu-cta{
  display: flex !important;
  align-items: center !important;
}
li.et-menu-cta > a,
li.et-menu-cta > a.menu-link,
.ast-builder-menu li.et-menu-cta > a.menu-link,
.main-header-menu li.et-menu-cta > a.menu-link,
.main-navigation li.et-menu-cta > a,
.ast-mobile-popup-content li.et-menu-cta > a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  min-height: 0 !important;
  padding: 0 22px !important;
  line-height: 1 !important;
  margin: 0 0 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  white-space: nowrap;
  background-color: var(--et-carmesi) !important;
  color: #FFF6F0 !important;
  border: 1px solid var(--et-carmesi-hi) !important;
  border-radius: 999px !important;
  transition: transform .3s var(--et-resorte), background-color .3s var(--et-suave) !important;
}
li.et-menu-cta > a:hover,
li.et-menu-cta > a.menu-link:hover,
.ast-builder-menu li.et-menu-cta > a.menu-link:hover,
.main-header-menu li.et-menu-cta > a.menu-link:hover{
  background-color: var(--et-carmesi-hi) !important;
  color: #FFF6F0 !important;
  transform: translateY(-2px);
}
/* Sin subrayado dorado ni marca de página actual */
li.et-menu-cta > a::after,
li.et-menu-cta > a.menu-link::after,
li.et-menu-cta > a::before{
  display: none !important;
  content: none !important;
}
li.et-menu-cta.current-menu-item > a,
li.et-menu-cta.current_page_item > a{
  color: #FFF6F0 !important;
}
/* Menú móvil: el botón se separa del listado y conserva su forma de
   píldora. Hace falta especificidad alta porque las reglas generales del
   menú móvil (relleno y filete inferior) lo pisan. */
@media (max-width: 921px){
  li.et-menu-cta,
  .ast-mobile-popup-drawer li.et-menu-cta,
  .ast-mobile-popup-content li.et-menu-cta{
    display: flex !important;
    justify-content: center !important;
    padding: 22px 24px !important;
    border-bottom: none !important;
    background: transparent !important;
  }
  li.et-menu-cta > a,
  li.et-menu-cta > a.menu-link,
  .ast-mobile-popup-drawer li.et-menu-cta > a,
  .ast-mobile-popup-drawer li.et-menu-cta > a.menu-link,
  .ast-mobile-popup-content li.et-menu-cta > a,
  .ast-header-break-point .main-header-menu li.et-menu-cta > a,
  .ast-header-break-point .main-navigation li.et-menu-cta > a{
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 36px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    border: 1px solid var(--et-carmesi-hi) !important;
    border-bottom: 1px solid var(--et-carmesi-hi) !important;
    background-color: var(--et-carmesi) !important;
    color: #FFF6F0 !important;
  }
}

/* =========================================================================
   PÁGINAS INTERNAS
   Mi historia · Sesiones · Eventos · Contacto
   ========================================================================= */

/* Hero de páginas internas: mismo respiro vertical y mismo peso
   tipográfico que el de la portada, pero sin la grilla de dos columnas
   (acá el hero es una sola columna). Sin este padding propio, el hero
   caía en el de .et-seccion (96px) y no coincidía con la portada. */
.et-hero-interno{
  padding: 110px 24px 90px !important;
}

/* Altura mínima pareja: sin esto cada hero mide distinto según cuántas
   líneas tenga su texto, y al pasar de una página a otra el título
   "salta". Con el piso fijo, todas las internas arrancan en el mismo
   punto. */
@media (min-width: 881px){
  .et-hero-interno{
    min-height: 480px;
    box-sizing: border-box;
  }
}

.et-hero-interno h1{
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1.08;
  margin: 0 0 1.4rem;
  letter-spacing: -0.01em;
}
.et-hero-interno .et-sub{
  max-width: 62ch;
}

/* En celular, el mismo padding reducido que usa el hero de la portada */
@media (max-width: 880px){
  .et-hero-interno{
    padding: 70px 20px 64px !important;
  }
}

/* Astra agrega 60 px de margen bajo #primary en las páginas internas.
   Cuando la página cierra con .et-final, ese hueco corta el degradado
   antes de llegar al pie. */
@media (min-width: 1200px){
  .ast-plain-container.ast-no-sidebar #primary{
    margin-bottom: 0;
  }
}

/* =========================================================================
   UTILIDADES DE ESPACIADO RÁPIDO
   ========================================================================= */
.et-center{ text-align: center; }
.et-muted{ color: var(--et-humo) !important; }

/* =========================================================================
   FORMULARIO DE CONTACTO (Contact Form 7)
   Agregar al final de style.css del child theme y subir ET_CHILD_VERSION.

   CF7 no trae estilos propios: hereda los del tema. Sin esto, los campos
   salen con el aspecto por defecto del navegador (fondo blanco, bordes
   grises) sobre el fondo negro del sitio.
   ========================================================================= */

.et-form{
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

.et-form-fila{
  margin: 0 0 22px !important;
}

.et-form label{
  display: block;
  margin-bottom: 8px;
  font-family: var(--et-font-sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--et-dorado);
  font-weight: 500;
}

/* Campos */
.et-form input[type="text"],
.et-form input[type="email"],
.et-form input[type="tel"],
.et-form select,
.et-form textarea{
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  background: var(--et-panel-2) !important;
  border: 1px solid var(--et-dorado-soft) !important;
  border-radius: 10px;
  color: var(--et-hueso) !important;
  font-family: var(--et-font-sans);
  font-size: 15px;
  line-height: 1.6;
  transition: border-color .3s var(--et-suave), box-shadow .3s var(--et-suave);
}

.et-form textarea{
  resize: vertical;
  min-height: 150px;
}

.et-form input::placeholder,
.et-form textarea::placeholder{
  color: var(--et-humo);
  opacity: 1;
}

.et-form input:focus,
.et-form select:focus,
.et-form textarea:focus{
  outline: none;
  border-color: var(--et-dorado) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,.18);
}

/* El desplegable: se le quita la flecha del sistema y se dibuja una
   propia, porque la nativa sale gris claro y se pierde sobre el fondo. */
.et-form select{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px !important;
  padding-right: 44px;
  cursor: pointer;
}
/* Las opciones del desplegable las dibuja el sistema operativo: solo
   se puede fijar su fondo y color, no su forma. */
.et-form select option{
  background: var(--et-panel-2);
  color: var(--et-hueso);
}

/* Botón de envío */
.et-form-envio{
  margin: 28px 0 0 !important;
}
.et-form input[type="submit"],
.et-form .wpcf7-submit{
  width: auto;
  padding: 14px 34px;
  background: var(--et-carmesi) !important;
  color: #FFF6F0 !important;
  border: 1px solid var(--et-carmesi-hi) !important;
  border-radius: 999px;
  font-family: var(--et-font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background-color .3s var(--et-suave), transform .3s var(--et-resorte);
}
.et-form input[type="submit"]:hover,
.et-form .wpcf7-submit:hover{
  background: var(--et-carmesi-hi) !important;
  transform: translateY(-2px);
}

.et-form-nota{
  margin-top: 18px !important;
  font-size: 13px !important;
  color: var(--et-humo) !important;
}

/* --- Mensajes de respuesta de CF7 ---------------------------------- */
.wpcf7 form .wpcf7-response-output{
  margin: 22px 0 0 !important;
  padding: 14px 18px !important;
  border-radius: 10px;
  border-width: 1px !important;
  font-size: 14px;
  color: var(--et-hueso);
}
.wpcf7 form.sent .wpcf7-response-output{
  border-color: #3DBB6E !important;
  background: rgba(61,187,110,.08);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{
  border-color: var(--et-carmesi) !important;
  background: rgba(166,38,57,.10);
}
.wpcf7-not-valid-tip{
  color: #E8798C !important;
  font-size: 12.5px !important;
  margin-top: 6px;
}
.et-form .wpcf7-not-valid{
  border-color: var(--et-carmesi) !important;
}

/* El indicador de envío en curso */
.wpcf7-spinner{
  background-color: var(--et-dorado) !important;
}

@media (max-width: 600px){
  .et-form input[type="text"],
  .et-form input[type="email"],
  .et-form select,
  .et-form textarea{
    /* 16px evita que iOS haga zoom automático al enfocar un campo */
    font-size: 16px;
  }
  .et-form input[type="submit"]{
    width: 100%;
  }
}

/* Mensaje de respuesta: que se note cuando aparece */
.wpcf7 form .wpcf7-response-output{
  scroll-margin-block: 120px;
}
.wpcf7 form.sent .wpcf7-response-output{
  font-size: 15px;
  font-weight: 500;
}

/* =========================================================================
   PÁGINAS LEGALES — política de privacidad, términos, avisos
   Clase: .et-legal  (en el Group de la sección de contenido)

   Agregar al final de style.css y subir ET_CHILD_VERSION.

   POR QUÉ ESTE BLOQUE EMPIEZA FIJANDO EL ANCHO:
   más arriba, la regla ".et-seccion > *" fuerza max-width 1120px con
   !important a todos los hijos directos de cualquier sección. En las
   páginas de venta eso está bien, pero acá convive con el max-width de
   68ch que llevaban los párrafos, y el resultado es que los títulos y
   los textos quedaban a un ancho y las listas a otro: por eso se veían
   corridas. Fijando UN solo ancho para todos los hijos directos, todo
   arranca en la misma línea vertical.
   ========================================================================= */

.et-legal > *{
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.et-legal{
  text-align: left;
}

.et-legal h2{
  font-size: clamp(22px, 2.6vw, 28px) !important;
  margin-top: 52px !important;
  margin-bottom: 14px !important;
  text-align: left !important;
}
.et-legal h2:first-of-type{
  margin-top: 0 !important;
}

.et-legal h3{
  font-size: 18px !important;
  color: var(--et-dorado) !important;
  margin-top: 30px !important;
  margin-bottom: 10px !important;
  text-align: left !important;
}

.et-legal p{
  font-size: 15.5px !important;
  line-height: 1.85 !important;
  color: #BDB4AA !important;
  margin-bottom: 16px !important;
  text-align: left !important;
}

/* Las listas comparten el ancho de los párrafos. La sangría de las
   viñetas va por dentro (box-sizing) para que el texto de cada ítem
   caiga en el mismo eje que el de los párrafos. */
.et-legal ul,
.et-legal ol{
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  padding-left: 20px !important;
  box-sizing: border-box;
  list-style-position: outside;
}
.et-legal li{
  font-size: 15.5px !important;
  line-height: 1.8 !important;
  color: #BDB4AA !important;
  margin-bottom: 9px;
  text-align: left !important;
}
.et-legal li::marker{
  color: var(--et-carmesi);
}
.et-legal li strong{
  color: var(--et-hueso);
  font-weight: 500;
}

/* Los enlaces dentro del texto legal se marcan más que en el resto del
   sitio: acá hace falta que se vean, no que se integren. */
.et-legal a{
  color: var(--et-dorado) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La fecha de actualización, bajo el título del hero.
   .et-nota trae márgenes automáticos de la sección de precios, donde va
   centrada. Acá tiene que alinearse con el resto del hero. */
.et-hero-interno .et-nota,
.et-legal .et-nota{
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 20px !important;
  text-align: left !important;
  font-size: 12.5px !important;
  letter-spacing: .04em;
}

@media (max-width: 880px){
  .et-legal h2{ margin-top: 40px !important; }
  .et-legal p,
  .et-legal li{ font-size: 15px !important; }
}

/* =========================================================================
   RESPLANDOR DE LOS HEROS INTERNOS
   El hero de la portada tiene un resplandor carmesí que deriva despacio.
   Los internos no tenían nada, y por eso se sentían planos: no les falta
   un efecto nuevo, les faltaba el que ya existe. Acá va corrido a la
   derecha, que es el lado donde en la portada está la foto y en estas
   páginas queda vacío.
   ========================================================================= */
.et-hero-interno{
  position: relative;
  overflow: hidden;
}
.et-hero-interno::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 82% 45%, rgba(166,38,57,.20), transparent 62%),
    radial-gradient(ellipse 40% 50% at 70% 80%, rgba(212,175,55,.06), transparent 70%);
  pointer-events: none;
  animation: et-deriva 18s ease-in-out infinite alternate;
}
.et-hero-interno > *{
  position: relative;
  z-index: 1;
}

/* =========================================================================
   PÁGINA 404
   Va al FINAL de style.css. Subir ET_CHILD_VERSION a 1.28.0 en functions.php
   y cambiar también la línea "Version:" del encabezado de este archivo.

   La plantilla vive en 404.php, en la raíz del child theme.
   Casi todo el diseño lo heredan las clases que ya existen (.et-hero-interno,
   .et-eyebrow, .et-sub, .wp-block-button). Acá solo va lo propio del 404.
   ========================================================================= */

.et-404{
  text-align: center !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.et-404 > *{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* El hero interno alinea el resplandor a la derecha, donde en las otras
   páginas queda espacio vacío. Acá el contenido está centrado, así que el
   resplandor se centra con él. */
.et-404.et-hero-interno::before{
  background:
    radial-gradient(ellipse 55% 65% at 50% 40%, rgba(166,38,57,.20), transparent 64%),
    radial-gradient(ellipse 40% 45% at 50% 78%, rgba(212,175,55,.06), transparent 70%);
}

.et-404 h1{
  font-size: clamp(2.1rem, 4.6vw, 3.4rem) !important;
  margin: 14px 0 20px !important;
}

.et-404 .et-sub{
  max-width: 52ch;
  margin-bottom: 34px !important;
}

.et-404 .wp-block-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center !important;
}

/* Enlaces de rescate: las páginas que la persona probablemente buscaba. */
.et-404-enlaces{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid rgba(212,175,55,.14);
}
.et-404-enlaces a{
  font-size: 14px;
  color: var(--et-humo) !important;
  text-decoration: none;
  transition: color .3s var(--et-suave);
}
.et-404-enlaces a:hover{
  color: var(--et-dorado) !important;
}

.et-404-wa{
  margin-top: 26px !important;
  font-size: 13.5px !important;
  color: var(--et-humo) !important;
}
.et-404-wa a{
  color: var(--et-dorado) !important;
}

/* Astra deja margen bajo #primary en pantallas grandes. En el 404 la sección
   es lo único de la página, así que ese hueco corta el degradado antes del pie. */
@media (min-width: 1200px){
  .error404 .ast-plain-container.ast-no-sidebar #primary,
  .error404 #primary{
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* El artículo del 404 no lleva el relleno lateral que Astra da a los
   artículos: el respiro ya lo pone .et-hero-interno. */
.error404 .site-main > article,
.et-404-wrap{
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 880px){
  .et-404-enlaces{
    gap: 10px 18px;
    margin-top: 36px;
  }
}