/*
Theme Name: Temara
Theme URI: https://www.temara.com.py/
Author: Temara S.A.
Author URI: https://www.temara.com.py/
Description: Tema de bloques propio de Temara S.A. La paleta, las tipografías y los espaciados viven en theme.json; las secciones de la portada y de las páginas de servicio están disponibles como patrones desde el editor. Pensado para que el contenido se administre sin tocar código.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
Version: 1.7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: temara
Tags: block-templates, full-site-editing, business, custom-colors, custom-logo, accessibility-ready
*/

/* ------------------------------------------------------------------
   Sólo va acá lo que theme.json no puede expresar.
   Todo color, tipografía o espaciado sale de las variables de preset,
   para que cambiarlos desde el editor cambie también estos componentes.
   ------------------------------------------------------------------ */

/* Rótulo naranja que encabeza cada sección (el <h6> del sistema) */
.tmr-rotulo {
  display: flex;
  align-items: center;
  gap: 11px;
}
.tmr-rotulo::before {
  content: "";
  width: 24px;
  height: 2px;
  flex: none;
  background: currentColor;
}

/* Una banda ocupa el ancho de la ventana, esté donde esté.
   No alcanza con el "align:full" de WordPress: esa marca sólo saca al bloque
   del contenedor inmediato, y si la plantilla de la página limita el ancho
   más arriba —como hace la plantilla "Página", cuyo main está limitado— la
   banda choca contra ese límite y queda con franjas blancas a los costados.
   Este cálculo la ancla a la ventana sin importar cuántos contenedores haya
   en el medio, y por eso el diseño ya no depende de qué plantilla se elija.

   El selector repite la clase a propósito: WordPress anula los márgenes de un
   alignfull anidado con una regla de dos clases y !important, y una sola clase
   pierde contra eso aunque también lleve !important. */
.wp-site-blocks .tmr-banda.tmr-banda {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
  width: auto;
}

/* La columna de contenido de cada banda. La banda va a todo el ancho y pinta
   el fondo; esto le pone la medida al contenido. Que sea un elemento real, y
   no el ancho que WordPress le impone a cada hijo, es lo que hace que el
   rótulo, el título y la cuadrícula compartan el mismo borde izquierdo. */
.tmr-medida {
  max-width: 1200px;
  margin-inline: auto;
}

/* Medidas propias de los títulos, para que no se estiren hasta el borde.
   El !important no es capricho: el diseño "constrained" de WordPress centra
   todo lo que lleva max-width propio, y lo hace con
   "margin-left: auto !important". Sin !important acá, los títulos y las
   entradillas se van al medio de la sección. */
.tmr-titulo-portada { max-width: 15ch; margin-inline: 0 !important }
.tmr-titulo-seccion { max-width: 19ch; margin-inline: 0 !important }

/* Bandas oscuras: mismas en tema claro y oscuro, como en el manual */
.tmr-noche,
.tmr-noche p,
.tmr-noche li {
  color: var(--wp--preset--color--noche-texto);
}
.tmr-noche h1,
.tmr-noche h2,
.tmr-noche h3,
.tmr-noche h4 {
  color: #fff;
}
.tmr-noche .tmr-suave {
  color: var(--wp--preset--color--noche-suave);
}
.tmr-noche hr.wp-block-separator {
  border-color: var(--wp--preset--color--noche-linea);
  color: var(--wp--preset--color--noche-linea);
}
.tmr-noche a:not(.wp-element-button) {
  color: #fff;
}

/* Tarjetas */
.tmr-tarjeta {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 14px;
  background: var(--wp--preset--color--fondo);
  padding: var(--wp--preset--spacing--30);
  height: 100%;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tmr-tarjeta:hover {
  transform: translateY(-3px);
  border-color: var(--wp--preset--color--naranja);
  box-shadow: var(--wp--preset--shadow--tarjeta);
}
.tmr-noche .tmr-tarjeta {
  background: #0b2e42a6;
  border-color: var(--wp--preset--color--noche-linea);
}
.tmr-noche .tmr-tarjeta:hover {
  border-color: var(--wp--preset--color--naranja);
}

.tmr-tarjeta :where(h2, h3, h4) a {
  color: inherit;
  text-decoration: none;
}
.tmr-tarjeta:hover :where(h2, h3, h4) a { color: var(--wp--preset--color--naranja) }

/* Cifras: números grandes, alineados en columna */
.tmr-cifra .tmr-valor {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 42px);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.tmr-cifra .tmr-pie {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--texto-suave);
  margin-top: 8px;
}
.tmr-noche .tmr-cifra .tmr-valor { color: #fff; }
.tmr-noche .tmr-cifra .tmr-pie   { color: var(--wp--preset--color--noche-suave); }

/* Entradilla de sección */
.tmr-lede {
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--texto-suave);
  max-width: 62ch;
  margin-inline: 0 !important;
}
.tmr-noche .tmr-lede { color: var(--wp--preset--color--noche-suave); }

/* En la banda naranja el color lo fija el bloque; la entradilla sólo aporta
   la medida de línea, no el color. */
.has-banda-naranja-gradient-background .tmr-lede { color: inherit }


.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--naranja);
}

/* Botón secundario: contorno en vez de relleno */
.wp-block-button.is-style-contorno .wp-element-button {
  background: transparent;
  color: var(--wp--preset--color--texto);
  border-color: var(--wp--preset--color--linea);
  box-shadow: none;
}
.wp-block-button.is-style-contorno .wp-element-button:hover {
  background: transparent;
  border-color: var(--wp--preset--color--naranja);
  color: var(--wp--preset--color--naranja);
}
.tmr-noche .wp-block-button.is-style-contorno .wp-element-button {
  color: #fff;
  border-color: #ffffff59;
  background: #ffffff0f;
}
.tmr-noche .wp-block-button.is-style-contorno .wp-element-button:hover {
  background: #ffffff26;
  border-color: #fff;
  color: #fff;
}

/* Colibrí: las ocho piezas se acercan hasta formar el isotipo */
.tmr-colibri { display: block; width: 100%; height: auto; overflow: visible; }
.tmr-colibri .tmr-pieza { transform-box: fill-box; transform-origin: center; }

/* El colibrí se ve armado siempre. Cuando hay JavaScript y entra en pantalla
   se le agrega .tmr-vuela, y recién ahí se arma pieza por pieza. Sin
   JavaScript queda el isotipo quieto, que es su estado correcto. */
html.tmr-anima .tmr-colibri.tmr-vuela .tmr-pieza {
  animation: tmr-unir 1.15s cubic-bezier(.22,.9,.28,1) backwards,
             tmr-levitar 3.1s ease-in-out infinite;
  opacity: 1;
}
html.tmr-anima .tmr-colibri.tmr-vuela .tmr-pieza:nth-child(1) { animation-delay: .00s, 1.30s }
html.tmr-anima .tmr-colibri.tmr-vuela .tmr-pieza:nth-child(2) { animation-delay: .07s, 1.34s }
html.tmr-anima .tmr-colibri.tmr-vuela .tmr-pieza:nth-child(3) { animation-delay: .14s, 1.38s }
html.tmr-anima .tmr-colibri.tmr-vuela .tmr-pieza:nth-child(4) { animation-delay: .21s, 1.42s }
html.tmr-anima .tmr-colibri.tmr-vuela .tmr-pieza:nth-child(5) { animation-delay: .28s, 1.46s }
html.tmr-anima .tmr-colibri.tmr-vuela .tmr-pieza:nth-child(6) { animation-delay: .35s, 1.50s }
html.tmr-anima .tmr-colibri.tmr-vuela .tmr-pieza:nth-child(7) { animation-delay: .42s, 1.54s }
html.tmr-anima .tmr-colibri.tmr-vuela .tmr-pieza:nth-child(8) { animation-delay: .49s, 1.58s }

@keyframes tmr-unir {
  from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.86) }
  to   { opacity: 1; transform: none }
}
@keyframes tmr-levitar {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-3.5px) }
}

/* Las secciones NO se ocultan nunca. Una animación de entrada que depende de
   JavaScript convierte cualquier falla en media página en blanco, y en un
   sitio que vende disponibilidad ese es el peor error posible. La clase
   tmr-surge queda en el marcado por si algún día se quiere animar, pero no
   esconde nada. */

/* Sin JavaScript, o con movimiento reducido, todo se ve igual y quieto */
@media (prefers-reduced-motion: reduce) {
  html.tmr-anima .tmr-colibri.tmr-vuela .tmr-pieza {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    transform: none;
  }
}

/* Figura del colibrí y sus ocho cualidades */
.tmr-figura-colibri { margin: 0; text-align: center }
.tmr-figura-colibri .tmr-colibri { max-width: 340px; margin: 0 auto }
.tmr-figura-colibri figcaption {
  margin-top: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--texto-suave);
}
.tmr-cualidades {
  list-style: none;
  margin: 0 0 var(--wp--preset--spacing--20);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.tmr-cualidad {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -.01em;
  padding: 7px 15px;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 999px;
  color: var(--wp--preset--color--texto);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.tmr-cualidad:hover {
  background: var(--wp--preset--color--naranja);
  border-color: var(--wp--preset--color--naranja);
  color: #fff;
  transform: translateY(-2px);
}

/* Preguntas frecuentes */
.tmr-preguntas { max-width: 860px; margin-inline: 0 !important }
.tmr-preguntas .wp-block-details {
  border-bottom: 1px solid var(--wp--preset--color--linea);
  padding-block: 18px;
}
.tmr-preguntas .wp-block-details:first-child { border-top: 1px solid var(--wp--preset--color--linea) }
.tmr-preguntas .wp-block-details summary {
  cursor: pointer;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 18px;
}
.tmr-preguntas .wp-block-details summary::-webkit-details-marker { display: none }
.tmr-preguntas .wp-block-details summary::after {
  content: "+";
  flex: none;
  font-family: var(--wp--preset--font-family--cuerpo);
  font-weight: 500;
  color: var(--wp--preset--color--naranja);
  transition: transform .2s;
}
.tmr-preguntas .wp-block-details[open] summary::after { transform: rotate(45deg) }
.tmr-preguntas .wp-block-details > p { margin-top: 14px; max-width: 72ch }

/* Socios. El logo se cuelga de una caja de alto fijo para que las fichas
   queden parejas aunque cada marca tenga su propia altura óptica. */
.tmr-socio-logo {
  display: flex;
  align-items: center;
  min-height: 40px;
}
.tmr-socio-logo img {
  width: auto;
  max-width: 100%;
  display: block;
}
.tmr-socio .tmr-pie { margin-top: 16px }
.tmr-socio-nombre {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0;
}

/* Fichas del equipo. El retrato es un marcador de posición hasta que estén
   las fotos; .tmr-pendiente marca en naranja lo que todavía no es real, para
   que nadie lo publique por descuido. */
.tmr-retrato {
  aspect-ratio: 1;
  width: 96px;
  margin-inline: 0 !important;
  border-radius: 999px;
  border: 1.5px dashed var(--wp--preset--color--naranja);
  background: color-mix(in srgb, var(--wp--preset--color--naranja) 8%, transparent);
}
.tmr-pendiente {
  color: var(--wp--preset--color--naranja);
  border-bottom: 1.5px dashed currentColor;
}
.tmr-pendiente::before { content: "[" }
.tmr-pendiente::after  { content: "]" }

/* Datos de contacto */
.tmr-dato {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
  margin-top: 12px;
}
.tmr-dato a { color: inherit; text-decoration: none }
.tmr-dato a:hover { color: var(--wp--preset--color--naranja) }
.tmr-contacto .tmr-pie { margin-top: 8px }





:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--wp--preset--color--naranja);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Impresión: el sitio tiene que salir legible en papel */
@media print {
  html.tmr-anima .tmr-colibri .tmr-pieza {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  /* Las bandas oscuras se imprimen en blanco, así que todo lo que estaba en
     blanco sobre ellas tiene que volver a tinta o se pierde. */
  .tmr-noche .tmr-cifra .tmr-valor,
  .tmr-noche .tmr-socio-nombre,
  .tmr-noche .tmr-lede,
  .tmr-noche .tmr-suave,
  .tmr-noche p { color: #12222E !important }
  .wp-site-blocks > header.wp-block-template-part,
  .wp-site-blocks > footer.wp-block-template-part,
  .tmr-no-imprimir { display: none !important }
  .tmr-noche { background: #fff !important; color: #000 !important }
  .tmr-noche h1, .tmr-noche h2, .tmr-noche h3, .tmr-noche h4 { color: #000 !important }
  .tmr-tarjeta { break-inside: avoid }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555 }
}