/*
Theme Name:   Sello «S» · Sostenibilidad Turística
Theme URI:    https://www.calidadturistica.es/
Description:  Tema hijo de Hello Elementor para la campaña «Tú EligeS · De lo verde a lo verdadero» del Sello «S» del ICTES. Aporta la identidad de marca (colores Pantone 626C y Cool Gray 10C, tipografías servidas desde el propio dominio) y los estilos de los widgets de la campaña. El montaje de la página se hace con Elementor.
Author:       The Hive Way
Author URI:   https://thehiveway.es/
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sello-s-child
Tags:         landing, elementor
*/

/* ==========================================================================
   1 · TIPOGRAFÍAS
   --------------------------------------------------------------------------
   Display: Weiss Std es la corporativa, pero es comercial de Adobe y su
   licencia de escritorio no permite alojarla como webfont. Si el ICTES tiene
   un Web Project de Adobe Fonts, local('Weiss Std') la usará sin tocar nada;
   si no, cae en Cormorant Garamond (SIL OFL).

   › Para activar la Weiss Std real: Apariencia › Personalizar › Sello «S» ·
     Marca › «Kit de Adobe Fonts», y pegar ahí el ID del kit.

   Texto: Open Sans, la que marca el manual del ICTES para textos corporativos.
   ========================================================================== */

@font-face {
  font-family: 'ICTES Display';
  src: local('Weiss Std'), local('WeissStd-Roman'), local('Weiss Std Roman'),
       url('assets/fonts/CormorantGaramond-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'ICTES Display';
  src: local('Weiss Std'), local('WeissStd-Roman'),
       url('assets/fonts/CormorantGaramond-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'ICTES Text';
  src: url('assets/fonts/OpenSans-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'ICTES Text';
  src: url('assets/fonts/OpenSans-latin-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   2 · TOKENS DE MARCA
   --------------------------------------------------------------------------
   Estas variables son la única fuente de verdad del color en toda la campaña.
   Cambiar aquí el dorado cambia la página entera.
   ========================================================================== */

:root {
  /* Corporativos (manual de marca del ICTES, epígrafe 2.3) */
  --ss-verde:        #285C4D;   /* Pantone 626C */
  --ss-gris:         #616365;   /* Pantone Cool Gray 10C */

  /* Derivados de verde para jerarquía de fondos */
  --ss-verde-900:    #102A22;
  --ss-verde-800:    #143229;
  --ss-verde-700:    #1B4036;
  --ss-verde-600:    #205046;
  --ss-verde-050:    #F1F6F4;

  /* Dorado de campaña. NO está en el manual: es propuesta de The Hive Way
     y está pendiente de que el ICTES lo valide. */
  --ss-oro:          #C9A227;
  --ss-oro-claro:    #E0BE4E;
  --ss-oro-texto:    #7A5E14;

  /* Neutros */
  --ss-tinta:        #1E2220;
  --ss-tinta-suave:  #4A4D4F;
  --ss-papel:        #FFFFFF;
  --ss-papel-calido: #FAF9F6;
  --ss-linea:        #E2E6E4;

  /* Tipografía */
  --ss-display: 'ICTES Display', 'Weiss Std', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ss-texto:   'ICTES Text', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --ss-radio:    4px;
  --ss-radio-lg: 10px;
}


/* ==========================================================================
   3 · BASE
   ========================================================================== */

body {
  font-family: var(--ss-texto);
  color: var(--ss-tinta-suave);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Los titulares de Elementor heredan la serif de marca salvo que se diga
   otra cosa desde el propio widget. */
h1, h2, h3, h4,
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--ss-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ss-verde);
}

strong, b { color: var(--ss-verde); font-weight: 700; }

/* Sobre fondo oscuro, Elementor marca la sección con esta clase (ver
   «Sección oscura» en el LEEME): titulares en blanco y texto legible. */
.ss-oscuro,
.ss-oscuro p,
.ss-oscuro li { color: rgba(255, 255, 255, 0.85); }
.ss-oscuro h1, .ss-oscuro h2, .ss-oscuro h3,
.ss-oscuro .elementor-heading-title,
.ss-oscuro strong { color: #fff; }

/* Foco visible en todo: Elementor no lo garantiza por sí solo */
.ss-oscuro :focus-visible { outline: 3px solid var(--ss-oro-claro); outline-offset: 3px; }
a:focus-visible, button:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ss-oro);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ==========================================================================
   4 · PIEZAS DE MARCA REUTILIZABLES
   --------------------------------------------------------------------------
   Clases que se aplican desde Elementor en «Avanzado › Clases CSS».
   Están documentadas en web_wp/LEEME.md.
   ========================================================================== */

/* .ss-antetitulo — el rótulo pequeño en versales sobre cada titular */
.ss-antetitulo .elementor-heading-title,
.ss-antetitulo {
  font-family: var(--ss-texto);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ss-oro-texto);
}
.ss-oscuro .ss-antetitulo .elementor-heading-title,
.ss-oscuro .ss-antetitulo { color: var(--ss-oro-claro); }

/* .ss-destacado — el párrafo con filete dorado a la izquierda */
.ss-destacado {
  padding-left: 1.1rem;
  border-left: 2px solid var(--ss-oro);
}

/* .ss-cursiva-oro — para la palabra destacada del titular del hero */
.ss-cursiva-oro em,
.ss-cursiva-oro i { font-style: italic; color: var(--ss-oro-claro); }

/* .ss-boton-oro / .ss-boton-linea — botones de campaña */
.ss-boton-oro .elementor-button {
  background-color: var(--ss-oro);
  color: #221B00;
  font-family: var(--ss-texto);
  font-weight: 700;
  border-radius: var(--ss-radio);
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.ss-boton-oro .elementor-button:hover {
  background-color: var(--ss-oro-claro);
  transform: translateY(-2px);
}
.ss-boton-linea .elementor-button {
  background-color: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55);
  font-weight: 700;
  border-radius: var(--ss-radio);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.ss-boton-linea .elementor-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  transform: translateY(-2px);
}

/* .ss-tarjeta — la caja blanca con filete verde arriba */
.ss-tarjeta {
  background: var(--ss-papel);
  border: 1px solid var(--ss-linea);
  border-top: 4px solid var(--ss-verde);
  border-radius: var(--ss-radio-lg);
}

/* .ss-pilar — las tres tarjetas translúcidas de «Qué es el Sello S» */
.ss-pilar {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--ss-radio-lg);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ss-pilar:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(201, 162, 39, 0.55);
  transform: translateY(-4px);
}
.ss-numero .elementor-heading-title {
  font-family: var(--ss-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ss-oro);
}

/* .ss-lista-check — listas con marca de verificación dorada */
.ss-lista-check ul,
.ss-lista-check ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.ss-lista-check li { position: relative; padding-left: 1.6rem; }
.ss-lista-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 2px solid var(--ss-verde);
  border-bottom: 2px solid var(--ss-verde);
  transform: rotate(-45deg);
}
.ss-oscuro .ss-lista-check li::before { border-color: var(--ss-oro-claro); }

/* Marca de agua circular del isotipo, para fondos de sección */
.ss-marca-agua { position: relative; isolation: isolate; overflow: hidden; }
.ss-marca-agua::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(34rem, 80vw);
  aspect-ratio: 1;
  background: url('assets/img/sello-s-blanco.png') center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
}

/* Pie: convivencia del Sello «S» con el logotipo institucional del ICTES
   (manual, epígrafe 2.10: márgenes diáfanos entre marcas). */
.ss-marcas-pie img { width: min(18.75rem, 100%); height: auto; }
.ss-marcas-pie .ss-otorga {
  margin: 1.1rem 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ss-linea);
  width: min(18.75rem, 100%);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ss-gris);
}
.ss-marcas-pie .ss-logo-ictes { width: min(15rem, 100%); }


/* ==========================================================================
   5 · PREFERENCIAS DEL SISTEMA
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .ss-oscuro { background: #fff !important; }
  .ss-oscuro, .ss-oscuro p, .ss-oscuro li { color: #000 !important; }
  .ss-oscuro h1, .ss-oscuro h2, .ss-oscuro h3 { color: var(--ss-verde) !important; }
}