/*
Theme Name: De Roxy Peluquería
Theme URI: https://deroxypeluqueria.com
Author: Carlos · vibe-coding
Author URI: https://deroxypeluqueria.com
Description: Tema custom block-first (FSE) para De Roxy Peluquería. WooCommerce-ready, mobile-first, accesible WCAG 2.2 AA. Dirección visual «salón editorial»: lienzo crema, superficies planas y magenta orquídea como único acento.
Version: 0.9.3
Requires at least: 6.5
Tested up to: 6.5
Requires PHP: 8.2
License: Proprietary
Text Domain: deroxy
Tags: full-site-editing, block-styles, woocommerce, accessibility-ready, custom-colors, custom-logo
*/

/* Estilos globales mínimos. La mayoría se gestiona vía theme.json. */

/* Tokens de profundidad (z-index canónico) y duración */
:root {
  --deroxy-z-base: 1;
  --deroxy-z-sticky: 30;
  --deroxy-z-fab: 50;
  --deroxy-z-overlay: 80;
  --deroxy-z-modal: 100;
  --deroxy-z-toast: 120;

  --deroxy-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --deroxy-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --deroxy-dur-fast: 160ms;
  --deroxy-dur-base: 240ms;
  --deroxy-dur-slow: 400ms;
}

/* Skip link accesible (WCAG 2.4.1) */
.skip-link:focus {
  position: fixed !important;
  top: 1rem;
  left: 1rem;
  z-index: 100000;
  padding: 0.75rem 1rem;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--text);
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  text-decoration: none;
  border-radius: 0.25rem;
}

/* Foco visible global */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  border-radius: 0.125rem;
}

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

/* Estilos visualmente ocultos pero accesibles (skip-link, sr-only) */
.screen-reader-text {
  position: absolute !important;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* FAQ — acordeón nativo accesible */
.deroxy-faq {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--wp--preset--color--border);
}

.deroxy-faq__item {
  border-bottom: 1px solid var(--wp--preset--color--border);
  background: transparent;
  transition: border-color 200ms ease;
}

.deroxy-faq__item:hover,
.deroxy-faq__item[open] {
  border-bottom-color: var(--wp--preset--color--accent);
}

.deroxy-faq__item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 0.25rem;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--xl);
  color: var(--wp--preset--color--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.deroxy-faq__item > summary::-webkit-details-marker { display: none; }

.deroxy-faq__item > summary::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid var(--wp--preset--color--accent);
  border-bottom: 2px solid var(--wp--preset--color--accent);
  transform: rotate(45deg);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

.deroxy-faq__item[open] > summary::after {
  transform: rotate(-135deg);
}

.deroxy-faq__item > p {
  padding: 0 0.25rem 1.5rem;
  margin: 0;
  max-width: 62ch;
  color: var(--wp--preset--color--text-soft);
  line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
  .deroxy-faq__item,
  .deroxy-faq__item > summary::after {
    transition: none;
  }
}

/* La barra se fija desde el WRAPPER del template part, no desde el grupo
   interior. Un sticky sólo se desplaza dentro de la caja de su padre, y
   el padre aquí es el <header>, que mide exactamente lo que la barra:
   puesto dentro, se iba con el scroll a los pocos píxeles. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: var(--deroxy-z-sticky);
}

/* Header con backdrop blur.
   El desenfoque va en un ::before, NO en el propio header: `backdrop-filter`
   crea bloque contenedor para los descendientes `position: fixed`, y eso
   encerraba el overlay del menú móvil dentro de la caja de la barra en
   lugar de dejarlo ocupar la pantalla. */
.deroxy-header {
  position: relative;
  z-index: var(--deroxy-z-sticky);
  background: transparent;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.deroxy-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--wp--preset--color--surface) 90%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  pointer-events: none;
}

@supports not (backdrop-filter: blur(0)) {
  .deroxy-header::before {
    background: var(--wp--preset--color--surface);
  }
}

.deroxy-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  /* La altura la marca el logo, no un padding fijo: así la compactación
     al hacer scroll es una sola transición sobre --deroxy-logo-h. */
  padding-block: clamp(0.75rem, 0.5rem + 0.6vw, 1.125rem);
}

.deroxy-header__end {
  align-items: center;
  gap: 1.25rem;
}

/* Marca del header — el lockup se sirve desde el tema, no desde el
   Site Logo de la mediateca: así viaja con el repo y no depende de que
   la opción `site_logo` exista en cada base de datos. */
.deroxy-header {
  --deroxy-logo-h: 72px;
}

/* WordPress mete el blockGap por defecto entre el template part del
   header y <main>, lo que dejaba una franja de 24px entre la barra y el
   hero. El hero tiene que arrancar pegado. */
.wp-site-blocks > main {
  margin-block-start: 0;
}

.deroxy-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  border: 0;
}

.deroxy-header__logo {
  height: var(--deroxy-logo-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: height var(--deroxy-dur-base) var(--deroxy-ease-out);
}

/* Estado compacto: se activa desde theme.js al separarse del top */
.deroxy-header.is-stuck {
  --deroxy-logo-h: 46px;
  box-shadow: 0 1px 0 var(--wp--preset--color--border);
}

@media (max-width: 899px) {
  .deroxy-header { --deroxy-logo-h: 46px; }
  .deroxy-header.is-stuck { --deroxy-logo-h: 38px; }
  .deroxy-header__end { gap: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .deroxy-header__logo { transition: none; }
}

/* CTA de la barra — la reserva es la conversión secundaria del negocio
   y hasta ahora no existía en el header. */
.deroxy-header__cta {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 1.375rem;
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 2px;
  background: var(--wp--preset--color--accent);
  color: #fff;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--deroxy-dur-base) var(--deroxy-ease-out),
              border-color var(--deroxy-dur-base) var(--deroxy-ease-out);
}

.deroxy-header__cta:hover,
.deroxy-header__cta:focus-visible {
  background: var(--wp--preset--color--accent-alt);
  border-color: var(--wp--preset--color--accent-alt);
  color: #fff;
}

/* Solo cuando hay sitio: por debajo de 1080px compite con la navegación
   y el FAB de WhatsApp ya cubre esa acción en móvil. */
@media (min-width: 1080px) {
  .deroxy-header__cta { display: inline-flex; }
}

/* Navegación principal: refinar enlaces */
.deroxy-nav .wp-block-navigation-item__content {
  padding: 0.375rem 0;
  position: relative;
  color: var(--wp--preset--color--text);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--deroxy-dur-fast) var(--deroxy-ease-out);
}

.deroxy-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--wp--preset--color--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--deroxy-dur-base) var(--deroxy-ease-out);
}

.deroxy-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.deroxy-nav .wp-block-navigation-item__content:focus-visible,
.deroxy-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--accent);
}

/* La página actual se marca con el filete permanente, no solo con color:
   el color por sí solo no es un distintivo suficiente (WCAG 1.4.1). */
.deroxy-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  font-weight: 600;
}

/* Target de 44px en móvil sin engordar la barra en escritorio */
@media (max-width: 899px) {
  .deroxy-nav .wp-block-navigation__responsive-container-open,
  .deroxy-nav .wp-block-navigation__responsive-container-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.deroxy-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.deroxy-nav .wp-block-navigation-item__content:focus-visible::after,
.deroxy-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

/* Hamburguesa móvil — el botón core de WP */
.deroxy-nav .wp-block-navigation__responsive-container-open,
.deroxy-nav .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--text);
}

/* Overlay del menú móvil — z-index canónico, padding generoso, contraste */
.deroxy-nav .wp-block-navigation__responsive-container.is-menu-open {
  z-index: var(--deroxy-z-overlay);
  background: var(--wp--preset--color--surface);
}

/* El `justifyContent: right` de la barra se cuela en el overlay y empujaba
   los enlaces fuera del borde derecho. Dentro del overlay la lista es una
   columna alineada a la izquierda con su propio margen. */
.deroxy-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%;
  padding-top: var(--wp--preset--spacing--60);
  padding-inline: var(--wp--preset--spacing--40);
}

.deroxy-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch !important;
  justify-content: flex-start !important;
}

.deroxy-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  text-align: left;
}

.deroxy-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
}

/* En el overlay los enlaces dejan las versalitas y pasan a display: es
   una lista de destinos, no una barra de utilidades. */
.deroxy-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  padding: 0.6rem 0;
}

.deroxy-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
  display: none;
}

.deroxy-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item + .wp-block-navigation-item {
  border-top: 1px solid var(--wp--preset--color--border);
}

.deroxy-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  width: 100%;
}

/* Cuando el menú móvil está abierto, ocultar header sticky para no doblar UI */
body.has-modal-open .deroxy-header {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .deroxy-nav .wp-block-navigation-item__content,
  .deroxy-nav .wp-block-navigation-item__content::after {
    transition: none;
  }
}

/* Footer responsive: stack en móvil */
.deroxy-footer .wp-block-columns {
  gap: var(--wp--preset--spacing--50);
}

@media (max-width: 781px) {
  .deroxy-footer .wp-block-columns {
    gap: var(--wp--preset--spacing--40);
  }
  .deroxy-footer .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* Footer: enlaces */
.deroxy-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--deroxy-dur-fast) var(--deroxy-ease-out),
              color var(--deroxy-dur-fast) var(--deroxy-ease-out);
}

.deroxy-footer a:hover,
.deroxy-footer a:focus-visible {
  border-bottom-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand);
}

@media (prefers-reduced-motion: reduce) {
  .deroxy-footer a {
    transition: none;
  }
}

/* Mapa Google embed responsive */
.deroxy-map-wrap {
  position: relative;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
}

/* Altura explícita EN EL IFRAME, no en el wrap con `height:100%`: el
   porcentaje resolvía a 0 (el `transform` del reveal en un ancestro rompe
   la resolución del alto en %), dejando el mapa invisible. Con un alto fijo
   en el propio iframe no depende de ningún contenedor. */
.deroxy-map-wrap iframe {
  display: block;
  width: 100%;
  height: clamp(340px, 46vh, 480px);
  border: 0;
}

/* =========================================================
   LISTA DE CONTACTO — filas con icono en aro, sin cortes feos
   ========================================================= */
.deroxy-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.deroxy-contact-list li + li {
  border-top: 1px solid var(--wp--preset--color--border);
}

.deroxy-contact-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0;
  text-decoration: none;
  border: 0 !important;
  color: var(--wp--preset--color--text);
}

.deroxy-contact-row__ic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--accent);
  transition: background-color var(--deroxy-dur-base) var(--deroxy-ease-out),
              color var(--deroxy-dur-base) var(--deroxy-ease-out),
              border-color var(--deroxy-dur-base) var(--deroxy-ease-out);
}

.deroxy-contact-row__tx {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.deroxy-contact-row__tx strong {
  font-weight: 600;
  color: var(--wp--preset--color--text);
  letter-spacing: 0.01em;
  transition: color var(--deroxy-dur-base) var(--deroxy-ease-out);
}

.deroxy-contact-row__tx small {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-soft);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.deroxy-contact-row:hover .deroxy-contact-row__ic,
.deroxy-contact-row:focus-visible .deroxy-contact-row__ic {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: #fff;
}

.deroxy-contact-row:hover .deroxy-contact-row__tx strong,
.deroxy-contact-row:focus-visible .deroxy-contact-row__tx strong {
  color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
  .deroxy-contact-row__ic,
  .deroxy-contact-row__tx strong { transition: none; }
}

/* =========================================================
   CAPA EDITORIAL — «Salón editorial»
   Dirección de diseño derivada de referencias reales del sector
   (skincare/haircare premium): lienzo crema, superficies planas,
   filete de 1px en lugar de sombra, un único acento cromático
   (magenta orquídea) reservado a la acción, y tipografía display
   grande con mucho aire. Sin gradientes, sin glow, sin ornamento
   de relleno.
   ========================================================= */

::selection {
  background: var(--wp--preset--color--brand-soft);
  color: var(--wp--preset--color--accent-alt);
}

body {
  background-color: var(--wp--preset--color--surface);
}

/* ---------------------------------------------------------
   Textura de papel. Una capa fija de grano finísimo (feTurbulence
   monocromo, data-URI ⇒ CSP-safe con `img-src data:`) sobre todo el
   documento. Da tacto a las superficies planas sin ensuciar el color:
   a esta opacidad es imperceptible sobre las fotos y se lee como papel
   sobre el crema, el blanco y el rosa pétalo. pointer-events:none para
   no interferir; por debajo del header/FAB/modales.
   --------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.07;
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  body::after { background-attachment: scroll; }
}

/* ---------------------------------------------------------
   Ritmo vertical: las bandas a ancho completo alternan crema,
   blanco y rosa pétalo. Un filete superior separa cada banda —
   incluidas dos secciones crema seguidas, cuya frontera antes se
   disolvía. `border-top` (no `border-block`) para no doblar la
   línea entre bandas contiguas.
   --------------------------------------------------------- */

/* !important porque cada pattern hardcodea `padding var:80` inline (~81px
   fijos) y anulaba este clamp. Con una sola fuente de verdad las secciones
   recuperan el aire fluido: 64px en móvil, hasta 120px en escritorio. */
main > .wp-block-group.alignfull,
main > .wp-block-cover.alignfull {
  padding-block: clamp(4rem, 2.5rem + 6vw, 7.5rem) !important;
  border-top: 1px solid var(--wp--preset--color--border);
  position: relative;
  /* `clip` recorta la flor que sangra por la esquina sin crear contexto de
     scroll (el bug que empujaba el ancho del documento en móvil). */
  overflow: clip;
}

/* =========================================================
   SISTEMA BOTÁNICO — la orquídea del logo como flor de fondo
   recurrente, tono sobre tono, alternando esquinas banda a banda.
   `multiply` la tiñe con el color de su propia banda (magenta sobre
   rosa = rosa profundo; sobre crema = malva), así siempre queda en la
   familia de la marca. Da vida floral sin sticker ni recolores.
   ========================================================= */
main > .wp-block-group.alignfull:not(.has-accent-orchid-gradient-background)::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(360px, 46vw, 680px);
  aspect-ratio: 569 / 396;
  background: url("assets/images/orchid-cluster.webp") no-repeat center / contain;
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
}

/* Impares: flor abajo-derecha. Pares: arriba-izquierda, girada. Así el
   motivo recurre pero nunca en la misma esquina en dos bandas seguidas. */
main > .wp-block-group.alignfull:nth-of-type(odd)::before {
  right: -7%;
  bottom: -16%;
  rotate: -8deg;
}
main > .wp-block-group.alignfull:nth-of-type(even)::before {
  left: -8%;
  top: -18%;
  rotate: 172deg;
}

/* El contenido de la banda, por encima de la flor. Excluye las orquídeas
   decorativas del jumbotron: esta regla tiene más especificidad que
   `.deroxy-cta-orchid { position:absolute }` y, sin el :not, las forzaba a
   `relative` → caían EN FLUJO, sumaban ~900px de alto y hacían el jumbotron
   más grande que la pantalla (y descolocaban el kicker). */
main > .wp-block-group.alignfull > *:not(.deroxy-cta-orchid) {
  position: relative;
  z-index: 1;
}

@media (max-width: 781px) {
  main > .wp-block-group.alignfull:not(.has-accent-orchid-gradient-background)::before {
    width: 78vw;
    opacity: 0.18;
  }
}

/* El hero abre la página: sin filete arriba (ya lo separa el header).
   Selector con .alignfull para igualar la especificidad de la regla global
   de padding (si no, el clamp de 120px la ganaba y el hero se pasaba de
   pantalla). El hero es banner: cabe en el viewport sin recortar contenido
   (nada de max-height, que con `overflow: clip` cortaría los botones). */
main > .deroxy-hero.alignfull {
  border-top: 0;
  padding-block: clamp(1.5rem, 0.75rem + 2.4vw, 2.75rem) !important;
}

/* La banda magenta no lleva filete claro encima: rompería el bloque de
   color. Su propio cambio de superficie ya la separa. */
main > .has-accent-orchid-gradient-background {
  border-top-color: transparent;
  position: relative;
  /* `clip` (no `hidden`) recorta la orquídea que sangra por la esquina sin
     crear contexto de scroll — el bug que empujaba el ancho del documento. */
  overflow: clip;
}

/* Guiño orgánico: la orquídea del logo, silueta blanca tono-sobre-tono, como
   marca de agua en la esquina de la banda magenta. Un solo motivo, sutil,
   para reconectar con la identidad sin caer en el ornamento de relleno. */
.deroxy-cta-orchid {
  position: absolute;
  z-index: 0;
  right: -3%;
  bottom: -16%;
  width: clamp(340px, 42vw, 640px);
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: brightness(0) invert(1);
  opacity: 0.16;
  rotate: -6deg;
}

/* Una segunda flor en la esquina opuesta del jumbotron: enmarca el bloque
   de color y equilibra la composición. */
.deroxy-cta-orchid--alt {
  right: auto;
  bottom: auto;
  left: -5%;
  top: -20%;
  width: clamp(240px, 30vw, 460px);
  rotate: 168deg;
  opacity: 0.1;
}

/* El contenido del CTA por encima de la marca de agua. */
.has-accent-orchid-gradient-background > .wp-block-group {
  position: relative;
  z-index: 1;
}

@media (max-width: 781px) {
  .deroxy-cta-orchid {
    width: 62vw;
    right: -8%;
    bottom: -8%;
    opacity: 0.07;
  }
}

/* ---------------------------------------------------------
   Eyebrow de sección — versalitas sans muy espaciadas.
   Sustituye al serif italic anterior: más sobrio y más legible
   a tamaño pequeño.
   --------------------------------------------------------- */

.has-text-color.has-accent-color.has-sm-font-size,
.has-text-color.has-accent-alt-color.has-sm-font-size {
  font-family: var(--wp--preset--font-family--body);
  font-style: normal;
  font-size: var(--wp--preset--font-size--xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
}

/* El eyebrow del CTA final va sobre magenta con color propio (#F0DDE8), así
   que no casa el selector de acento y se quedaba en sm/0.18em: más grande y
   apretado que los otros ocho. Lo alineo al mismo registro. */
.has-accent-orchid-gradient-background p.has-sm-font-size:first-child {
  font-size: var(--wp--preset--font-size--xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
}

/* Filete corto bajo los títulos de sección. Centrado por defecto; los
   títulos alineados a la izquierda (about-us) reciben la misma firma pero
   anclada a la izquierda, para que el sistema no dependa de la alineación. */
h2.wp-block-heading.has-text-align-center::after,
.wp-block-column > h2.wp-block-heading::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin: 1.25rem auto 0;
  background: var(--wp--preset--color--accent);
}

.wp-block-column > h2.wp-block-heading::after {
  margin-left: 0;
  margin-right: 0;
}

/* Énfasis italic dentro de titulares */
h1 em,
main h1 em,
main h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--wp--preset--color--accent);
}

/* Entradilla de sección. Sube de lg (18-20px) a xl (22-24px): bajo un h2
   de hasta 54px, lg se quedaba a solo 1.2× del cuerpo y aplanaba el salto.
   `!important` porque la clase de preset de WordPress ya lo lleva. Las
   entradillas centradas van más estrechas para no perder el foco. */
main .has-lg-font-size {
  font-size: var(--wp--preset--font-size--xl) !important;
  line-height: 1.5;
  max-width: 62ch;
}

main .has-text-align-center.has-lg-font-size {
  max-width: 46ch;
  margin-inline: auto;
}

/* Enlaces de cuerpo: subrayado fino, sin relleno al hover */
.wp-block-post-content a:not(.wp-block-button__link),
main p a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
  transition: border-color var(--deroxy-dur-fast) var(--deroxy-ease-out);
}

.wp-block-post-content a:not(.wp-block-button__link):hover,
main p a:not(.wp-block-button__link):hover {
  border-bottom-color: var(--wp--preset--color--accent);
}

/* =========================================================
   BOTONES — planos, rectangulares, versalitas.
   Primario: relleno orquídea. Secundario: filete tinta.
   ========================================================= */

.wp-block-button__link {
  transition: background-color var(--deroxy-dur-base) var(--deroxy-ease-out),
              color var(--deroxy-dur-base) var(--deroxy-ease-out),
              border-color var(--deroxy-dur-base) var(--deroxy-ease-out);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--accent-alt);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  border-width: 1px;
  border-color: var(--wp--preset--color--text);
  color: var(--wp--preset--color--text);
  background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--accent);
  background: var(--wp--preset--color--accent);
  color: #fff;
}

/* =========================================================
   TARJETAS DE TEXTO — filete de 1px + sombra suave teñida de marca
   para dar profundidad (las de solo texto se veían planas), y detalles
   de acento que rompen la plancha: filete corto bajo el eyebrow y
   viñetas en magenta. El hover eleva un punto más.
   ========================================================= */

.wp-block-column.has-background,
.deroxy-panel {
  border: 1px solid var(--wp--preset--color--border);
  box-shadow:
    0 1px 2px rgba(26, 17, 24, 0.03),
    0 16px 32px -20px rgba(133, 23, 109, 0.22);
  transition: border-color var(--deroxy-dur-base) var(--deroxy-ease-out),
              box-shadow var(--deroxy-dur-base) var(--deroxy-ease-out),
              transform var(--deroxy-dur-base) var(--deroxy-ease-out);
}

.wp-block-column.has-background:hover,
.deroxy-panel:hover {
  border-color: var(--wp--preset--color--brand);
  box-shadow:
    0 2px 4px rgba(26, 17, 24, 0.04),
    0 22px 40px -20px rgba(133, 23, 109, 0.30);
  transform: translateY(-2px);
}

/* Cabecera de tarjeta de servicio: icono de categoría en un aro de filete
   + numeral editorial grande en fantasma. Es lo que convierte la columna
   de texto en una tarjeta diseñada. */
.deroxy-srv-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}

.deroxy-srv-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--accent);
  flex-shrink: 0;
}

.deroxy-srv-card__num {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(3rem, 2.2rem + 2.4vw, 4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--wp--preset--color--accent);
  opacity: 0.16;
  letter-spacing: -0.02em;
}

/* Acento de marca bajo el eyebrow de categoría. Ya no es :first-child
   (la cabecera va delante), así que se ancla al propio eyebrow. */
.wp-block-column.has-background > p.has-accent-color::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-top: 0.65rem;
  background: var(--wp--preset--color--accent);
}

/* Viñetas en magenta: un detalle de color en tarjetas que si no serían
   solo texto negro sobre claro. */
.wp-block-column.has-background ul li::marker {
  color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-column.has-background,
  .deroxy-panel {
    transition: border-color var(--deroxy-dur-base) var(--deroxy-ease-out);
  }
  .wp-block-column.has-background:hover,
  .deroxy-panel:hover {
    transform: none;
  }
}

/* =========================================================
   HERO — foto a sangre, panel de texto alineado a la izquierda
   ========================================================= */

.deroxy-hero {
  position: relative;
  overflow: hidden;
  color: var(--wp--preset--color--text);
  border-bottom: 1px solid var(--wp--preset--color--border);
  /* El bloque cover trae 1rem de padding propio que se sumaba al del
     contenedor interior: el hero arrancaba 17px por dentro de la
     alineación del resto de la página. */
  padding-inline: 0;
}

.deroxy-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.deroxy-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% 50%;
}

/* Velo crema: denso donde cae el texto, transparente sobre la melena */
.deroxy-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      95deg,
      rgba(247, 244, 240, 0.97) 0%,
      rgba(247, 244, 240, 0.94) 38%,
      rgba(247, 244, 240, 0.55) 62%,
      rgba(247, 244, 240, 0.12) 100%
    );
}

.deroxy-hero__panel {
  margin-inline: 0 auto;
  max-width: 680px;
  text-align: left !important;
}

.deroxy-hero__panel > * {
  text-align: left !important;
}

.deroxy-hero__panel .wp-block-buttons {
  justify-content: flex-start !important;
}

/* El sujeto de la foto vive a la izquierda del encuadre; con el panel
   a la izquierda hay que empujar el encuadre para no taparlo. */
@media (min-width: 900px) {
  .deroxy-hero__media img { object-position: 68% 50%; }
}

/* Móvil: la foto pasa a telón de fondo y el texto se apoya en un velo
   casi opaco. Un panel lateral no cabe a 375px. */
@media (max-width: 899px) {
  .deroxy-hero__media img { object-position: 40% 42%; }

  .deroxy-hero__scrim {
    background:
      linear-gradient(
        180deg,
        rgba(247, 244, 240, 0.45) 0%,
        rgba(247, 244, 240, 0.90) 36%,
        rgba(247, 244, 240, 0.98) 100%
      );
  }

  .deroxy-hero__panel {
    margin-inline: auto;
    max-width: 100%;
  }
}

/* El cover a sangre lleva padding vertical propio, lo que anula el padding
   raíz de WordPress: sin esto el panel de texto queda pegado al borde. */
.deroxy-hero > .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
  color: var(--wp--preset--color--text);
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--40);
}

/* A 74px el titular se parte en cuatro líneas y pierde el golpe de vista.
   El hero se queda un escalón por debajo del tope de la escala. */
.deroxy-hero h1 {
  font-size: clamp(2.125rem, 1.4rem + 3.1vw, 3.75rem);
}

.deroxy-hero,
.deroxy-hero p,
.deroxy-hero h1,
.deroxy-hero h2,
.deroxy-hero h3 {
  color: var(--wp--preset--color--text);
}

.deroxy-hero p.has-accent-alt-color { color: var(--wp--preset--color--accent-alt) !important; }
.deroxy-hero p.has-text-soft-color  { color: var(--wp--preset--color--text-soft) !important; }

/* Dato de contacto al pie del hero: sobre un filete, no en italic */
.deroxy-hero__panel > p.has-xs-font-size:last-child {
  font-style: normal !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--wp--preset--color--border);
  letter-spacing: 0.04em;
}

@keyframes deroxy-fade-up {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes deroxy-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.deroxy-hero .wp-block-cover__inner-container > * {
  animation: deroxy-fade-up 800ms var(--deroxy-ease-out) backwards;
}

.deroxy-hero .wp-block-cover__inner-container > *:nth-child(1) { animation-delay: 60ms; }
.deroxy-hero .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: 160ms; }
.deroxy-hero .wp-block-cover__inner-container > *:nth-child(3) { animation-delay: 260ms; }

@media (prefers-reduced-motion: reduce) {
  .deroxy-hero .wp-block-cover__inner-container > * {
    animation: none;
  }
}

/* =========================================================
   REVEAL ON SCROLL — JS añade .is-pending-reveal a elementos
   por debajo del fold; al entrar en viewport se les añade
   .is-revealed. Si JS falla, el contenido queda visible.
   ========================================================= */

.is-pending-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--deroxy-ease-out),
              transform 600ms var(--deroxy-ease-out);
}

.is-pending-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .is-pending-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.deroxy-faq__item > p {
  animation: deroxy-fade var(--deroxy-dur-base) var(--deroxy-ease-out);
}

/* =========================================================
   BANDA DE ACENTO (CTA final) — magenta plano.
   WordPress emite desde theme.json `.has-text-color { color: var(--text)
   !important }`, que anula los inline claros: hay que forzar los textos.
   ========================================================= */

.has-accent-orchid-gradient-background h2,
.has-accent-orchid-gradient-background h2.has-text-color,
.has-accent-orchid-gradient-background h3,
.has-accent-orchid-gradient-background h3.has-text-color {
  color: #FFFFFF !important;
}

.has-accent-orchid-gradient-background p,
.has-accent-orchid-gradient-background p.has-text-color,
.has-accent-orchid-gradient-background p.has-sm-font-size,
.has-accent-orchid-gradient-background p.has-sm-font-size.has-text-color {
  color: #F0DDE8 !important;
}

.has-accent-orchid-gradient-background h2.has-text-align-center::after {
  background: rgba(255, 255, 255, 0.5);
}

.has-accent-orchid-gradient-background .wp-block-button .wp-block-button__link {
  color: var(--wp--preset--color--accent) !important;
  background: #FFFFFF !important;
  border-radius: 2px !important;
}

.has-accent-orchid-gradient-background .wp-block-button.is-style-outline .wp-block-button__link {
  color: #FFFFFF !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  border-radius: 2px !important;
}

.has-accent-orchid-gradient-background .wp-block-button.is-style-outline .wp-block-button__link:hover {
  color: var(--wp--preset--color--accent) !important;
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* =========================================================
   FOOTER — texto claro sobre tinta
   ========================================================= */

.deroxy-footer,
.deroxy-footer .has-text-color,
.deroxy-footer h1.has-text-color, .deroxy-footer h1,
.deroxy-footer h2.has-text-color, .deroxy-footer h2,
.deroxy-footer h3.has-text-color, .deroxy-footer h3,
.deroxy-footer h4.has-text-color, .deroxy-footer h4,
.deroxy-footer p.has-text-color, .deroxy-footer p,
.deroxy-footer a.has-text-color, .deroxy-footer a,
.deroxy-footer .wp-block-site-title.has-text-color,
.deroxy-footer .wp-block-site-title a {
  color: var(--wp--preset--color--background) !important;
}

.deroxy-footer .wp-block-separator {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

.deroxy-footer a:hover,
.deroxy-footer a:focus-visible {
  color: var(--wp--preset--color--brand-soft) !important;
  border-bottom-color: var(--wp--preset--color--brand-soft) !important;
}

.deroxy-footer .wp-block-social-link svg { fill: #fff !important; }
.deroxy-footer .wp-block-social-link { background: transparent !important; }

.deroxy-footer__brand {
  display: inline-block;
  text-decoration: none;
  border: 0 !important;
  transition: opacity var(--deroxy-dur-fast) var(--deroxy-ease-out);
}
.deroxy-footer__brand:hover,
.deroxy-footer__brand:focus-visible {
  opacity: 0.85;
  border: 0 !important;
}
.deroxy-footer__logo {
  width: clamp(170px, 75%, 220px);
  height: auto;
  max-width: 100%;
  display: block;
}
/* =========================================================
   SERVICIOS — mosaico fotográfico (pattern services-photos)
   ========================================================= */

.deroxy-servicios-mosaico {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--30, 1rem);
}

/* Cuatro columnas fijas en escritorio: es el reparto que asumen los
   `sizes` de las imágenes (23vw) y el que deja la retícula cuadrada. */
@media (min-width: 900px) {
  .deroxy-servicios-mosaico {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wp--preset--spacing--40, 1.25rem);
  }
}

.deroxy-servicio__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--wp--preset--color--background);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color var(--deroxy-dur-base) ease;
}

.deroxy-servicio__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--wp--preset--color--brand-soft);
}

.deroxy-servicio__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 520ms var(--deroxy-ease-out);
}

.deroxy-servicio__texto {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.35rem 1.6rem;
}

.deroxy-servicio__nombre {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  transition: color var(--deroxy-dur-base) ease;
}

.deroxy-servicio__desc {
  font-size: var(--wp--preset--font-size--sm, 0.9rem);
  color: var(--wp--preset--color--text-soft);
  line-height: 1.5;
}

.deroxy-servicio__enlace:hover,
.deroxy-servicio__enlace:focus-visible {
  border-color: var(--wp--preset--color--accent);
}

.deroxy-servicio__enlace:hover .deroxy-servicio__nombre,
.deroxy-servicio__enlace:focus-visible .deroxy-servicio__nombre {
  color: var(--wp--preset--color--accent);
}

.deroxy-servicio__enlace:hover .deroxy-servicio__media img,
.deroxy-servicio__enlace:focus-visible .deroxy-servicio__media img {
  transform: scale(1.045);
}

.deroxy-servicio__enlace:focus-visible {
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .deroxy-servicio__enlace,
  .deroxy-servicio__media img {
    transition: none;
  }
  .deroxy-servicio__enlace:hover,
  .deroxy-servicio__enlace:focus-visible {
    transform: none;
  }
  .deroxy-servicio__enlace:hover .deroxy-servicio__media img,
  .deroxy-servicio__enlace:focus-visible .deroxy-servicio__media img {
    transform: none;
  }
}

/* =========================================================
   TRABAJOS EN VÍDEO (pattern works-video)
   ========================================================= */

/* Los clips son cuatro y van en una sola fila alineada (alignwide), no
   dentro del contenido de 720px: así respiran y las tarjetas 4:5 dejan de
   parecer columnas de móvil recortadas. 2×2 en pantallas pequeñas. */
.deroxy-trabajos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--30, 1rem);
}

@media (min-width: 900px) {
  .deroxy-trabajos {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wp--preset--spacing--40, 1.25rem);
  }
}

/* 4:5 en vez de 9:16: el metraje es vertical de móvil, pero una tarjeta
   tan larga rompía el ritmo cuadrado del resto de la página. El sujeto
   (cabeza/melena de espaldas) cae en el tercio superior, así que el
   encuadre se ancla arriba para no cortarlo al recortar por cover. */
.deroxy-trabajo {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  background: var(--wp--preset--color--text);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--wp--preset--color--border);
}

.deroxy-trabajo__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* Botón de reproducción a pantalla completa de la tarjeta: toda la
   superficie es el target, muy por encima de los 44×44 exigidos en móvil. */
.deroxy-trabajo__toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(26, 17, 24, 0) 45%, rgba(26, 17, 24, 0.72) 100%);
  display: grid;
  place-items: center;
  /* El pie de la tarjeta se apoya abajo; sin esto el icono de play, centrado
     en toda la superficie, caía sobre el título en las tarjetas cortas 2×2
     de móvil. Reservando el hueco del pie el icono queda sobre la imagen. */
  padding-bottom: 3.5rem;
  transition: background-color var(--deroxy-dur-base) var(--deroxy-ease-out);
}

.deroxy-trabajo__icono {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: block;
  position: relative;
  transition: transform var(--deroxy-dur-base) var(--deroxy-ease-out),
              opacity var(--deroxy-dur-base) ease;
}

/* Triángulo de play */
.deroxy-trabajo__icono::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  border-left: 16px solid var(--wp--preset--color--accent);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* En reproducción el icono pasa a pausa y se atenúa para no tapar el vídeo */
.deroxy-trabajo.is-playing .deroxy-trabajo__icono {
  opacity: 0;
}

.deroxy-trabajo.is-playing .deroxy-trabajo__toggle {
  background: transparent;
}

.deroxy-trabajo.is-playing:hover .deroxy-trabajo__icono,
.deroxy-trabajo.is-playing .deroxy-trabajo__toggle:focus-visible .deroxy-trabajo__icono {
  opacity: 1;
}

.deroxy-trabajo.is-playing .deroxy-trabajo__icono::after {
  border: 0;
  width: 16px;
  height: 18px;
  left: 50%;
  border-left: 5px solid var(--wp--preset--color--accent);
  border-right: 5px solid var(--wp--preset--color--accent);
}

.deroxy-trabajo__toggle:hover .deroxy-trabajo__icono {
  transform: scale(1.08);
}

.deroxy-trabajo__toggle:focus-visible {
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: -3px;
}

.deroxy-trabajo__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  pointer-events: none;
  color: #fff;
}

.deroxy-trabajo__titulo {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg, 1.15rem);
  line-height: 1.15;
  color: #fff;
}

.deroxy-trabajo__desc {
  font-size: var(--wp--preset--font-size--xs, 0.8rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
}

.deroxy-trabajo.is-playing .deroxy-trabajo__pie {
  opacity: 0;
  transition: opacity var(--deroxy-dur-base) ease;
}

.deroxy-trabajos__pie {
  text-align: center;
  margin: var(--wp--preset--spacing--40, 1.25rem) 0 0;
  font-size: var(--wp--preset--font-size--sm, 0.9rem);
  color: var(--wp--preset--color--text-soft);
}

@media (prefers-reduced-motion: reduce) {
  .deroxy-trabajo__icono,
  .deroxy-trabajo__toggle,
  .deroxy-trabajo__pie {
    transition: none;
  }
  .deroxy-trabajo__toggle:hover .deroxy-trabajo__icono {
    transform: none;
  }
}

/* =========================================================
   ENCABEZADO DE PÁGINA INTERNA (deroxy-page-head)
   ========================================================= */

.deroxy-page-head {
  /* Separa del header sticky y da aire antes del primer bloque de contenido. */
  border-bottom: 1px solid var(--wp--preset--color--border);
  margin-bottom: 0;
}

.deroxy-page-head h1 {
  text-wrap: balance;
  margin-block: 0.5rem;
}

.deroxy-page-head > p:last-child {
  margin-top: 0.75rem;
  max-width: 60ch;
  margin-inline: auto;
}

/* =========================================================
   BOTÓN FLOTANTE DE COOKIES (plugin subsana-cookies, solo staging)
   ---------------------------------------------------------
   El plugin deja un botón «Gestionar cookies» abajo a la derecha, justo
   encima del FAB de WhatsApp (que también vive a la derecha): se solapaban.
   Lo movemos a la esquina inferior IZQUIERDA, a la misma altura de base que
   el WhatsApp FAB (bottom: 28px), para que queden simétricos y despejados.

   Este selector solo existe cuando el plugin está activo (staging). En local,
   donde el consentimiento lo lleva el bloque del tema, no hay nada que mover.
   ========================================================= */
/* Igualamos la especificidad del plugin (#subsana-cookies-minimized .sc-minimized)
   con su mismo ID + !important, para ganar el posicionamiento con seguridad. */
#subsana-cookies-minimized .sc-minimized,
#subsana-cookies-minimized.sc-pos-right,
.sc-minimized {
  left: 28px !important;
  right: auto !important;
  bottom: 28px !important;
}

@media (max-width: 599px) {
  #subsana-cookies-minimized .sc-minimized,
  #subsana-cookies-minimized.sc-pos-right,
  .sc-minimized {
    left: 16px !important;
    bottom: 20px !important;
  }
}

/* --- Firma del studio (footer) ------------------------------------------ */
/* El footer va sobre `text` (#1A1118) con texto `background` (#FFFFFF): la firma
   hereda ese blanco y solo baja la opacidad. A 0.7 el contraste es 9.37:1 (AAA). */
.deroxy-studio-credit {
  margin-top: var(--wp--preset--spacing--30, 1rem);
  opacity: .7;
}
.deroxy-studio-credit a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.deroxy-studio-credit:hover,
.deroxy-studio-credit:focus-within { opacity: 1; }