/* =========================================================
   Ribell — componentes
   Solo lo que theme.json no puede expresar. Todo lo demás
   (color, tipografía, espaciado, retícula) vive en theme.json.
   ========================================================= */

/* ---------- 1. Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--wp--preset--color--amber); outline-offset: 3px; }

/* ---------- 2. Antetítulo ---------- */
.is-style-eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}
.is-style-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: currentColor;
  opacity: .55;
  flex: none;
}

/* ---------- 3. Botones ---------- */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  border: 2px solid transparent;
  transition: background .18s var(--wp--custom--ease),
              color .18s var(--wp--custom--ease),
              border-color .18s var(--wp--custom--ease),
              transform .18s var(--wp--custom--ease);
}
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button__link:active { transform: translateY(0); }

.is-style-ghost .wp-block-button__link {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.is-style-ghost .wp-block-button__link:hover {
  background: currentColor;
  color: var(--wp--preset--color--base);
}

/* Flecha opcional: añadir la clase «con-flecha» al botón */
.con-flecha .wp-block-button__link::after {
  content: "";
  width: 1.05em;
  height: 1.05em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ribell-arrow) center / contain no-repeat;
  mask: var(--ribell-arrow) center / contain no-repeat;
  transition: transform .2s var(--wp--custom--ease);
}
.con-flecha .wp-block-button__link:hover::after { transform: translateX(3px); }
:root {
  --ribell-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* Enlace con subrayado que se retira al pasar el cursor */
.link-u {
  display: inline-block;
  font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s var(--wp--custom--ease);
}
.link-u:hover { background-size: 0% 2px; background-position: 100% 100%; }

/* ---------- 4. Cabecera ---------- */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wp--preset--color--base);
  border-bottom: 1px solid rgba(22, 29, 51, .12);
  transition: box-shadow .2s var(--wp--custom--ease);
}
.wp-site-blocks > header.is-stuck { box-shadow: 0 6px 24px rgba(22, 29, 51, .09); }

.wp-block-site-logo img { height: 1.9rem; width: auto; }

/* Navegación */
.wp-block-navigation .wp-block-navigation-item__content {
  position: relative;
  font-size: .95rem;
  font-weight: 600;
  padding-block: .35rem;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--wp--preset--color--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--wp--custom--ease);
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

/* Menú desplegable en móvil */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--white);
  padding: 2rem var(--wp--custom--gutter) 3rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: clamp(1.6rem, 8vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  padding-block: .5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
  display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li {
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  width: 100%;
}

/* ---------- 5. Bloques de servicio (imagen de fondo atenuada) ---------- */
.ribell-service {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(22rem, 42vw, 32rem);
}
.ribell-service > .wp-block-cover__image-background,
.ribell-service > img.wp-block-cover__image-background {
  transition: transform .6s var(--wp--custom--ease), opacity .4s var(--wp--custom--ease);
}
.ribell-service:hover > .wp-block-cover__image-background { transform: scale(1.06); }
.ribell-service .wp-block-cover__background { transition: opacity .4s var(--wp--custom--ease); }
.ribell-service:hover .wp-block-cover__background { opacity: .74; }

/* ---------- 6. Cifras ---------- */
.ribell-stat__value {
  font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--wp--preset--color--amber);
}
.ribell-stat__label { font-size: .95rem; opacity: .82; max-width: 22ch; }

/* ---------- 7. Tarjetas ---------- */
.is-style-card {
  background: var(--wp--preset--color--white);
  /* Dentro de una sección oscura la tarjeta heredaba el texto en blanco:
     el titular y las etiquetas del formulario quedaban invisibles. */
  color: var(--wp--preset--color--contrast);
  border-radius: var(--wp--custom--radius--base);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  height: 100%;
  transition: transform .25s var(--wp--custom--ease), box-shadow .25s var(--wp--custom--ease);
}
.is-style-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(22, 29, 51, .11);
}
.is-style-card img { width: 3rem; height: 3rem; object-fit: contain; object-position: left center; }

/* ---------- 8. Ficha técnica ---------- */
.is-style-spec { font-variant-numeric: tabular-nums; }
.is-style-spec table { width: 100%; border-collapse: collapse; }
.is-style-spec th,
.is-style-spec td {
  padding: 1rem 1.25rem;
  text-align: left;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.is-style-spec thead th {
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
  border-bottom-width: 2px;
}
.is-style-spec tbody tr > td:last-child {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--wp--preset--color--amber);
  white-space: nowrap;
}
.is-style-spec tbody tr:last-child th,
.is-style-spec tbody tr:last-child td { border-bottom: 0; }
.is-style-spec figcaption {
  font-size: var(--wp--preset--font-size--small);
  opacity: .6;
  margin-top: 1.5rem;
}

/* ---------- 9. Acordeón de políticas ---------- */
.ribell-acc { border-top: 1px solid rgba(22, 29, 51, .18); }
.ribell-acc__item { border-bottom: 1px solid rgba(22, 29, 51, .18); }
.ribell-acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  font-size: var(--wp--preset--font-size--terciario);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ribell-acc__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform .3s var(--wp--custom--ease);
}
.ribell-acc__btn[aria-expanded="true"] .ribell-acc__icon { transform: rotate(45deg); }
.ribell-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--wp--custom--ease);
}
.ribell-acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.ribell-acc__panel > div { overflow: hidden; }
.ribell-acc__body { padding-bottom: 2rem; max-width: 68ch; color: var(--wp--preset--color--muted); }
.ribell-acc__body > * + * { margin-top: 1rem; }

/* ---------- 10. Formularios ---------- */
.ribell-field { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.ribell-field label { font-size: .85rem; font-weight: 600; letter-spacing: .04em; }
.ribell-field :is(input, select, textarea) {
  font: inherit;
  padding: .85rem 1rem;
  border: 1px solid rgba(22, 29, 51, .25);
  border-radius: .5rem;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--contrast);
  width: 100%;
  transition: border-color .18s var(--wp--custom--ease), box-shadow .18s var(--wp--custom--ease);
}
.ribell-field textarea { min-height: 9rem; resize: vertical; }
.ribell-field :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--wp--preset--color--navy);
  box-shadow: 0 0 0 3px rgba(44, 70, 139, .18);
}

/* ---------- 11. Pie ---------- */
.wp-site-blocks > footer { background: var(--wp--preset--color--contrast); color: #fff; }
.wp-site-blocks > footer a:hover { opacity: .65; }

/* ---------- 12. Revelado al hacer scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity .7s var(--wp--custom--ease), transform .7s var(--wp--custom--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}
/* En el editor nunca se oculta nada */
.editor-styles-wrapper [data-reveal] { opacity: 1; transform: none; }

/* ---------- 13. Utilidades de medida ---------- */
/* La unidad ch escala con el tamaño de letra: en un titular de 64 px,
   46ch son 1470 px y el elemento se escapaba del contenedor, quedando
   desalineado con su antetítulo. Se limita también al ancho del sitio. */
.t-measure { max-width: min(46ch, var(--ribell-ancho)); }
.t-measure-wide { max-width: min(62ch, var(--ribell-ancho)); }

/* ---------- 14. Listas con viñeta cuadrada ---------- */
.ribell-lista { list-style: none; padding-left: 0; display: grid; gap: .85rem; }
.ribell-lista li { position: relative; padding-left: 1.75rem; }
.ribell-lista li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: .6rem; height: .6rem; border-radius: 2px;
  background: var(--ribell-vineta, var(--wp--preset--color--navy));
}
.ribell-lista--roja { --ribell-vineta: var(--wp--preset--color--red); }
.ribell-lista--ambar { --ribell-vineta: var(--wp--preset--color--amber); }

/* ---------- 15. Acordeón nativo (bloque Detalles) ---------- */
.ribell-acordeon { border-top: 1px solid rgba(22,29,51,.18); }
.ribell-acordeon .wp-block-details {
  border-bottom: 1px solid rgba(22,29,51,.18);
  padding: 0;
}
.ribell-acordeon .wp-block-details > summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(1.25rem, 2.5vw, 2rem) 3rem clamp(1.25rem, 2.5vw, 2rem) 0;
  position: relative;
  font-size: var(--wp--preset--font-size--terciario);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.ribell-acordeon .wp-block-details > summary::-webkit-details-marker { display: none; }
.ribell-acordeon .wp-block-details > summary::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  width: 1.5rem; height: 1.5rem;
  transform: translateY(-50%);
  background: currentColor;
  -webkit-mask: var(--ribell-mas) center / contain no-repeat;
  mask: var(--ribell-mas) center / contain no-repeat;
  transition: transform .3s var(--wp--custom--ease);
}
.ribell-acordeon .wp-block-details[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.ribell-acordeon .wp-block-details > *:not(summary) { max-width: 68ch; color: var(--wp--preset--color--muted); }
.ribell-acordeon .wp-block-details > *:last-child { padding-bottom: 2rem; }
:root {
  --ribell-mas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* ---------- 16. Formularios: fila de dos campos ---------- */
.ribell-form__fila { display: grid; gap: 1.5rem; }
@media (min-width: 40em) { .ribell-form__fila { grid-template-columns: 1fr 1fr; } }
.ribell-field--check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .75rem; }
.ribell-field--check input { width: 1.1rem; height: 1.1rem; margin-top: .25rem; }
.ribell-field--check label { font-weight: 400; font-size: .85rem; color: var(--wp--preset--color--muted); }
.ribell-form__nota { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

/* =========================================================
   17. Cabecera transparente + panel lateral de dos niveles
   ========================================================= */

.wp-site-blocks > header { background: transparent; border-bottom: 0; box-shadow: none; }

.ribell-cabecera {
  position: relative;
  z-index: 110;
  width: 100%;
  color: var(--wp--preset--color--contrast);
  transition: background .3s var(--wp--custom--ease), box-shadow .3s var(--wp--custom--ease);
}
.ribell-cabecera__barra {
  max-width: var(--ribell-ancho);
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
}
.ribell-cabecera__logo img { height: 2rem; width: auto; transition: filter .3s var(--wp--custom--ease); }

.ribell-cabecera__acciones { align-items: center; }
.ribell-cabecera__servicio { display: none; font-size: .82rem; font-weight: 600; letter-spacing: .04em; }
@media (min-width: 62em) { .ribell-cabecera__servicio { display: block; } }
.ribell-cabecera__servicio a { position: relative; }
.ribell-cabecera__servicio a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--wp--custom--ease);
}
.ribell-cabecera__servicio a:hover::after { transform: scaleX(1); }

.ribell-cabecera__idiomas {
  display: flex; gap: .5rem; align-items: center;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
}
.ribell-cabecera__idiomas [aria-current] { opacity: 1; }
.ribell-cabecera__idiomas a { opacity: .5; }
.ribell-cabecera__idiomas a:hover { opacity: 1; }

/* Estado sobre la portada: transparente, en blanco */
.ribell-cabecera.es-transparente { color: #fff; position: absolute; inset: 0 0 auto; }
.ribell-cabecera.es-transparente .ribell-cabecera__logo img { filter: brightness(0) invert(1); }

/* Estado al hacer scroll: sólida y fija */
.ribell-cabecera.es-solida {
  position: fixed; inset: 0 0 auto;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  box-shadow: 0 6px 24px rgba(22, 29, 51, .09);
  animation: ribell-baja .35s var(--wp--custom--ease);
}
.ribell-cabecera.es-solida .ribell-cabecera__logo img { filter: none; }
@keyframes ribell-baja { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Disparador del panel */
.ribell-nav__disparador {
  display: inline-flex; align-items: center; gap: .65rem;
  background: none; border: 0; cursor: pointer; padding: .4rem 0;
  color: inherit; font: inherit;
  font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.ribell-nav__disparador-texto { display: none; }
@media (min-width: 48em) { .ribell-nav__disparador-texto { display: inline; } }

.ribell-nav__hamburguesa { display: grid; gap: 5px; width: 1.5rem; }
.ribell-nav__hamburguesa span {
  display: block; height: 2px; width: 100%; background: currentColor;
  transition: transform .3s var(--wp--custom--ease), opacity .2s;
}
.ribell-nav__hamburguesa span:nth-child(2) { width: 70%; margin-left: auto; }

/* Velo */
.ribell-nav__velo {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(22, 29, 51, .55);
  opacity: 0;
  transition: opacity .35s var(--wp--custom--ease);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ribell-nav__velo.es-visible { opacity: 1; }

/* Cajón lateral */
.ribell-nav__cajon {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
  width: min(30rem, 100vw);
  display: flex; flex-direction: column;
  background: var(--wp--preset--color--contrast);
  color: #fff;
  transform: translateX(100%);
  transition: transform .4s var(--wp--custom--ease);
  overflow: hidden;
}
.ribell-nav__cajon.es-abierto { transform: translateX(0); }

.ribell-nav__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem var(--wp--custom--gutter);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  flex: none;
}
.ribell-nav__marca { font-size: .78rem; font-weight: 700; letter-spacing: .18em; opacity: .55; }
.ribell-nav__cerrar {
  background: none; border: 0; cursor: pointer; color: inherit;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border-radius: 50%;
  transition: background .2s var(--wp--custom--ease);
}
.ribell-nav__cerrar:hover { background: rgba(255, 255, 255, .1); }
.ribell-nav__cerrar svg { width: 1.4rem; height: 1.4rem; }

/* Cuerpo y paneles apilados */
.ribell-nav__cuerpo { position: relative; flex: 1; overflow: hidden; overscroll-behavior: contain; }
.ribell-nav__panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 2rem var(--wp--custom--gutter) 2.5rem;
  overflow-y: auto;
  background: var(--wp--preset--color--contrast);
  transition: transform .35s var(--wp--custom--ease), opacity .25s var(--wp--custom--ease);
}
.ribell-nav__panel {
  transition: transform .35s var(--wp--custom--ease),
              opacity .25s var(--wp--custom--ease),
              visibility .35s var(--wp--custom--ease);
}
.ribell-nav__panel--raiz { transform: translateX(0); opacity: 1; visibility: visible; }
.ribell-nav__panel--raiz.es-detras { transform: translateX(-28%); opacity: 0; visibility: hidden; pointer-events: none; }
.ribell-nav__panel[data-nav-panel] { transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; }
.ribell-nav__panel[data-nav-panel].es-frente { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; }

.ribell-nav__lista { display: grid; gap: .25rem; list-style: none; padding: 0; margin: 0; }
.ribell-nav__item { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.ribell-nav__enlace {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .85rem 0;
  background: none; border: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  transition: color .2s var(--wp--custom--ease), padding-left .25s var(--wp--custom--ease);
}
.ribell-nav__enlace:hover { color: var(--wp--preset--color--amber); padding-left: .5rem; }
.ribell-nav__enlace.is-actual { color: var(--wp--preset--color--amber); }
.ribell-nav__flecha { width: 1.1rem; height: 1.1rem; flex: none; opacity: .5; transition: transform .2s var(--wp--custom--ease); }
.ribell-nav__enlace:hover .ribell-nav__flecha { transform: translateX(4px); opacity: 1; }

.ribell-nav__enlace--resumen {
  font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wp--preset--color--amber);
}

.ribell-nav__volver {
  display: inline-flex; align-items: center; gap: .6rem;
  background: none; border: 0; cursor: pointer; color: inherit; font: inherit;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  opacity: .6; padding: 0 0 1.5rem;
  transition: opacity .2s var(--wp--custom--ease);
}
.ribell-nav__volver:hover { opacity: 1; }
.ribell-nav__volver .ribell-nav__flecha { opacity: 1; }
.ribell-nav__volver:hover .ribell-nav__flecha { transform: translateX(-4px); }

.ribell-nav__titulo {
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--wp--preset--color--amber);
  margin-bottom: 1.25rem;
}

.ribell-nav__pie {
  margin-top: auto; padding-top: 2.5rem;
  display: grid; gap: .5rem;
  font-size: .95rem; opacity: .65;
}
.ribell-nav__contacto:hover { opacity: 1; }

body.ribell-sin-scroll { overflow: hidden; }

/* =========================================================
   18. Tarjetas con imagen y bloque de texto inferior
   ========================================================= */
.ribell-tarjetas { display: grid; gap: 1.5rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 48em) { .ribell-tarjetas { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 62em) { .ribell-tarjetas { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.ribell-tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--wp--preset--color--white);
  height: 100%;
  transition: transform .25s var(--wp--custom--ease), box-shadow .25s var(--wp--custom--ease);
}
.ribell-tarjeta:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(22, 29, 51, .12); }
.ribell-tarjeta__foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--wp--preset--color--base-dark); }
.ribell-tarjeta__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--wp--custom--ease);
}
.ribell-tarjeta:hover .ribell-tarjeta__foto img { transform: scale(1.05); }

.ribell-tarjeta__cuerpo {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  border-top: 3px solid var(--wp--preset--color--red);
}
.ribell-tarjeta__eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.ribell-tarjeta__titulo {
  margin: .6rem 0 .75rem;
  font-size: var(--wp--preset--font-size--terciario);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
}
.ribell-tarjeta__texto {
  color: var(--wp--preset--color--muted);
  font-size: .95rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ribell-tarjeta__mas {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: auto; padding-top: 1.25rem;
  font-size: .85rem; font-weight: 600;
  color: var(--wp--preset--color--navy);
}
.ribell-tarjeta__mas svg { width: 1rem; height: 1rem; transition: transform .2s var(--wp--custom--ease); }
.ribell-tarjeta:hover .ribell-tarjeta__mas svg { transform: translateX(4px); }
.ribell-tarjeta__enlace::after { content: ""; position: absolute; inset: 0; }

/* =========================================================
   19. Cabecera invertida: hamburguesa en bloque rojo a la izquierda
   ========================================================= */

.ribell-cabecera__barra {
  max-width: none;
  padding-inline: 0;
  align-items: stretch;
  min-height: 4.5rem;
}
.ribell-cabecera__izquierda { align-items: stretch; gap: 0; }
.ribell-cabecera__logo { display: flex; align-items: center; padding-inline: clamp(1rem, 2vw, 2rem); }
.ribell-cabecera__acciones { padding-right: clamp(1rem, 2.5vw, 3rem); }

/* El disparador pasa a ser un bloque de color a sangre */
.ribell-nav { display: flex; }
.ribell-nav__disparador {
  width: clamp(3.5rem, 5vw, 5.5rem);
  min-height: 4.5rem;
  display: grid; place-items: center;
  background: var(--wp--preset--color--red);
  color: #fff;
  padding: 0;
  transition: background .25s var(--wp--custom--ease);
}
.ribell-nav__disparador:hover { background: var(--wp--preset--color--red-light); }
.ribell-nav__disparador-texto { display: none !important; }
.ribell-nav__hamburguesa { width: 1.35rem; gap: 4px; }
.ribell-nav__hamburguesa span:nth-child(2) { width: 100%; }

/* Enlaces de servicio en versalitas finas */
.ribell-cabecera__servicio {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ribell-cabecera__idiomas {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .1em;
  gap: .65rem;
}
.ribell-cabecera__idiomas [aria-current] { position: relative; }
.ribell-cabecera__idiomas [aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px;
  height: 1px; background: currentColor;
}
.ribell-cabecera__idiomas span + a { padding-left: .65rem; border-left: 1px solid currentColor; }

/* El bloque rojo se mantiene rojo aunque la cabecera sea transparente */
.ribell-cabecera.es-transparente .ribell-nav__disparador { background: var(--wp--preset--color--red); }

/* El cajón ahora entra por la izquierda */
.ribell-nav__cajon { right: auto; left: 0; transform: translateX(-100%); }
.ribell-nav__cajon.es-abierto { transform: translateX(0); }
.ribell-nav__panel--raiz.es-detras { transform: translateX(-28%); }

/* =========================================================
   20. Tipografía ligera
   ========================================================= */
.ribell-nav__enlace { font-weight: 300; letter-spacing: -0.03em; }
.ribell-nav__enlace--resumen { font-weight: 600; letter-spacing: .12em; }
.ribell-tarjeta__titulo { font-weight: 400; }
.is-style-eyebrow { font-weight: 500; }

/* =========================================================
   21. Portada: carrusel a pantalla completa
   ========================================================= */
.ribell-portada {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--wp--preset--color--contrast);
  color: #fff;
}

.ribell-portada__pista { position: absolute; inset: 0; }

.ribell-portada__slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--wp--custom--ease), visibility .9s;
}
.ribell-portada__slide.es-activa { opacity: 1; visibility: visible; }

.ribell-portada__foto { position: absolute; inset: 0; }
.ribell-portada__foto picture { display: block; width: 100%; height: 100%; }
.ribell-portada__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform 9s linear;
}
.ribell-portada__slide.es-activa .ribell-portada__foto img { transform: scale(1); }
.ribell-portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,29,51,.55) 0%, rgba(22,29,51,.2) 35%, rgba(22,29,51,.85) 100%);
}

.ribell-portada__texto {
  position: relative;
  max-width: var(--ribell-ancho);
  margin-inline: auto;
  width: 100%;
  padding: 0 var(--wp--custom--gutter);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.ribell-portada__eyebrow {
  font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transform: translateY(1rem);
  transition: opacity .7s var(--wp--custom--ease) .25s, transform .7s var(--wp--custom--ease) .25s;
}
.ribell-portada__titulo {
  font-size: clamp(2.75rem, 1rem + 7vw, 8rem);
  font-weight: 200;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 1rem 0 0;
  max-width: 18ch;
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity .8s var(--wp--custom--ease) .35s, transform .8s var(--wp--custom--ease) .35s;
}
.ribell-portada__slide.es-activa .ribell-portada__eyebrow,
.ribell-portada__slide.es-activa .ribell-portada__titulo { opacity: 1; transform: none; }

/* Los tres accesos sobrepuestos */
.ribell-portada__accesos {
  position: relative;
  max-width: var(--ribell-ancho);
  margin-inline: auto;
  width: 100%;
  padding: 0 var(--wp--custom--gutter) clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 62em) { .ribell-portada__accesos { grid-template-columns: repeat(3, 1fr); } }

.ribell-acceso { color: #fff; }
.ribell-acceso__texto {
  font-size: clamp(.95rem, .9rem + .2vw, 1.1rem);
  font-weight: 300;
  line-height: 1.55;
  max-width: 26ch;
}
.ribell-acceso__mas {
  display: inline-flex; align-items: center; gap: .75rem;
  margin-top: 1rem;
  font-size: .9rem; font-weight: 400;
}
.ribell-acceso__mas svg { width: 1.4rem; height: 1rem; transition: transform .25s var(--wp--custom--ease); }
.ribell-acceso:hover .ribell-acceso__mas svg { transform: translateX(6px); }

/* Controles */
.ribell-portada__controles {
  position: absolute;
  right: var(--wp--custom--gutter);
  bottom: clamp(2.5rem, 5vw, 4rem);
  display: flex; align-items: center; gap: .35rem;
  z-index: 3;
}
.ribell-portada__boton {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: #fff; opacity: .7;
  transition: opacity .2s var(--wp--custom--ease);
}
.ribell-portada__boton:hover { opacity: 1; }
.ribell-portada__boton svg { width: 1.15rem; height: 1.15rem; }
.ribell-portada__boton .icono-reanudar { display: none; }
.ribell-portada__boton.esta-pausado .icono-pausar { display: none; }
.ribell-portada__boton.esta-pausado .icono-reanudar { display: block; }

/* Indicador circular de progreso junto al primer acceso */
.ribell-portada__progreso {
  position: absolute;
  left: calc(var(--wp--custom--gutter) - 3.25rem);
  top: .25rem;
  width: 2.75rem; height: 2.75rem;
  display: none;
}
@media (min-width: 80em) { .ribell-portada__progreso { display: block; } }
.ribell-portada__progreso circle { fill: none; stroke-width: 1.5; }
.ribell-portada__progreso .pista { stroke: rgba(255,255,255,.3); }
.ribell-portada__progreso .avance {
  stroke: #fff;
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  transform: rotate(-90deg);
  transform-origin: center;
}
.ribell-portada.esta-animando .ribell-portada__progreso .avance {
  animation: ribell-progreso var(--ribell-intervalo, 7s) linear infinite;
}
@keyframes ribell-progreso { from { stroke-dashoffset: 126; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ribell-portada__foto img { transition: none; transform: none; }
  .ribell-portada__slide { transition: opacity .01ms; }
  .ribell-portada.esta-animando .ribell-portada__progreso .avance { animation: none; }
}

/* =========================================================
   22. Pie ligero y centrado
   ========================================================= */
.wp-site-blocks > footer { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.ribell-pie {
  text-align: center;
  /* El relleno vivía en el grupo de la plantilla; al pasar el pie a bloque
     PHP se perdió y el logo quedaba pegado a la franja de arriba. */
  padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  padding-inline: var(--ribell-borde);
}
.ribell-pie__logo {
  display: block;
  width: -webkit-fit-content;
  width: fit-content;
  margin: 0 auto 2.5rem !important;
}
.ribell-pie__logo img {
  display: block;
  margin-inline: auto;
  width: 132px;
  height: auto;
}

.ribell-pie__sedes {
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: .01em;
  color: var(--wp--preset--color--contrast);
  margin-bottom: 3rem;
}
.ribell-pie__sedes a { border-bottom: 1px solid transparent; transition: border-color .2s var(--wp--custom--ease); }
.ribell-pie__sedes a:hover { border-color: currentColor; }

.ribell-pie__enlaces,
.ribell-pie__legal {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0;
  font-weight: 300;
}
.ribell-pie__enlaces { font-size: .95rem; margin-bottom: 1.5rem; }
.ribell-pie__legal { font-size: .82rem; color: var(--wp--preset--color--muted); }

.ribell-pie__enlaces a,
.ribell-pie__legal a {
  padding-inline: 1rem;
  border-left: 1px solid rgba(22, 29, 51, .2);
  line-height: 1.1;
  transition: color .2s var(--wp--custom--ease);
}
.ribell-pie__enlaces a:first-child,
.ribell-pie__legal a:first-child { border-left: 0; }
.ribell-pie__enlaces a:hover,
.ribell-pie__legal a:hover { color: var(--wp--preset--color--red); }

.ribell-pie__copy {
  margin-top: 3rem;
  font-size: .78rem;
  font-weight: 300;
  color: var(--wp--preset--color--muted);
}
/* El subrayado va solo bajo el nombre: si cuelga tambien del rayo,
   el trazo choca con la punta del glifo. El rayo se queda a tamano
   propio y sin subrayar, como una marca. */
.ribell-pie__copy a { border-bottom: 0; }
.ribell-pie__marca { border-bottom: 1px solid currentColor; }
.ribell-pie__rayo {
  margin-left: .12em;
  font-size: .9em;
  line-height: 1;
  vertical-align: baseline;
}
.ribell-pie__copy a:hover .ribell-pie__marca { color: var(--wp--preset--color--red); border-bottom-color: currentColor; }

@media (max-width: 47.99em) {
  .ribell-pie__enlaces a, .ribell-pie__legal a { border-left: 0; padding: .35rem .75rem; }
}


/* --- La portada ignora cualquier relleno heredado y ocupa todo el ancho --- */
.wp-block-group.alignfull > .ribell-portada,
.entry-content > .alignfull > .ribell-portada { margin: 0; }
.ribell-portada { width: 100%; max-width: none; }

/* Los accesos dejan sitio a los controles en pantallas anchas */


/* En móvil los accesos se reducen al primero, para no tapar la foto */
@media (max-width: 47.99em) {
  .ribell-acceso:nth-child(n+3) { display: none; }
  .ribell-portada__titulo { font-size: clamp(2.25rem, 1rem + 9vw, 3.5rem); }
}

/* =========================================================
   23. Portada: correcciones de composición
   ========================================================= */

/* --- 1. Fuera la franja vacía sobre la portada --- */
.wp-site-blocks > header,
.wp-site-blocks > main { margin-block-start: 0 !important; }
.wp-block-template-part { margin: 0; }

/* --- 2. El texto baja y se apoya justo encima de los accesos --- */
.ribell-portada__slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ribell-portada__texto {
  position: absolute;
  left: 0;
  right: 0;
  /* La altura real de la franja de accesos la mide el JS. */
  bottom: var(--ribell-accesos-alto, 13rem);
  padding-bottom: 0;
}

.ribell-portada__titulo {
  /* Más contenido y menos estridente: antes llegaba a 128 px. */
  font-size: clamp(2.5rem, 1rem + 4.6vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 15ch;
  margin-top: .75rem;
}

.ribell-portada__eyebrow { font-size: .78rem; }

/* --- 3. Accesos con proporción de columna, no de párrafo ancho --- */


.ribell-acceso__texto {
  /* Era un span en línea: el max-width no le afectaba y el enlace
     se pegaba al final del párrafo en vez de ir debajo. */
  display: block;
  max-width: none;
  font-size: 1rem;
  line-height: 1.6;
}

.ribell-acceso__mas {
  display: inline-flex;
  margin-top: .9rem;
  font-size: .9rem;
  font-weight: 400;
}

/* El círculo de progreso se alinea con la primera línea del primer acceso */
.ribell-portada__progreso { top: -.15rem; }

@media (max-width: 61.99em) {
  .ribell-portada__texto { bottom: var(--ribell-accesos-alto, 11rem); }
}

/* =========================================================
   24. Portada: alto completo, ancho a sangre y controles fuera del texto
   ========================================================= */

/* El marco del carrusel no lleva relleno, pero sí conserva los márgenes
   negativos que WordPress aplica a .alignfull para romper el gutter raíz. */
.ribell-portada__marco { padding: 0 !important; }

/* Alto de pantalla real, con respaldo para navegadores sin svh. */
.ribell-portada {
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  max-width: none;
}

/* --- Accesos y controles en una sola fila: no pueden solaparse --- */








/* El indicador circular acompaña al primer acceso */
.ribell-portada__progreso { left: calc(var(--wp--custom--gutter) - 3.5rem); }

/* =========================================================
   25. Portada: rejilla determinista para accesos + controles
   -----------------------------------------------------------
   Con flex y margin-left:auto los controles se salían del
   contenedor. Una rejilla con minmax(0, …) no puede desbordar:
   el mínimo de cada columna es cero, así que siempre encogen
   antes que salirse.
   ========================================================= */

.ribell-portada__accesos {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1.75rem;
  padding-right: var(--wp--custom--gutter);
  box-sizing: border-box;
}

@media (min-width: 62em) {
  .ribell-portada__accesos {
    /* Cuatro cuartos de la retícula de 12: tres accesos de texto y
       una columna final para los controles. A 1320 px son cuatro
       columnas de 312 px, es decir 3 columnas de rejilla cada una. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: end;
  }
}

.ribell-acceso {
  min-width: 0;          /* permite encoger dentro de la rejilla */
  align-self: start;
  max-width: none;
}

.ribell-portada__controles {
  position: static;
  margin: 0;
  justify-self: end;
  align-self: end;
  padding-bottom: .25rem;
  min-width: 0;
}

@media (max-width: 61.99em) {
  .ribell-portada__controles { justify-self: start; }
}

/* Nada dentro de la portada puede sobresalir del contenedor */
.ribell-portada__texto,
.ribell-portada__accesos { box-sizing: border-box; }

/* =========================================================
   26. Sin costuras beige entre secciones
   -----------------------------------------------------------
   WordPress separa los hijos del contenido con un margen
   vertical. Como cada sección trae su propio relleno, ese
   margen sólo dejaba ver el fondo de la página entre bloques
   de color.
   ========================================================= */
.entry-content > *,
.wp-site-blocks > main > * { margin-block-start: 0; margin-block-end: 0; }

/* =========================================================
   27. Un solo borde para todo el sitio
   -----------------------------------------------------------
   WordPress calcula el margen de un bloque alignwide así:
      izquierda = max( relleno raíz , (ancho ventana − ancho máximo) / 2 )
   Reproducimos ese mismo cálculo en una variable y lo usamos en
   la portada y en los bloques a sangre. Con eso el antetítulo
   del carrusel, los accesos y el «01 / Transporte» arrancan
   exactamente en la misma línea vertical, y el texto nunca pasa
   de ese ancho.
   ========================================================= */

/* Contenedor escalonado de Bootstrap 5.3 («container»).
   Los anchos y los puntos de corte no son inventados: salen de
   https://getbootstrap.com/docs/5.3/layout/containers/
   y de /layout/breakpoints/. Doce columnas, medianil de 24 px.

     contenedor  1320 px      medianil  24 px      columnas  12
     ------------------------------------------------------------
     mitades    6 col   648 px   648 + 24 + 648          = 1320
     tercios    4 col   424 px   424x3 + 24x2            = 1320
     cuartos    3 col   312 px   312x4 + 24x3            = 1320

   Esas tres son las divisiones que usa el sitio: mitades
   (texto/imagen, azul/rojo), tercios (tarjetas) y cuartos (los
   accesos de portada y las cifras). Caen exactas porque son 12.

   --ribell-ancho alinea los bloques a sangre que pintamos nosotros;
   el mismo valor está en theme.json (wideSize) para los bloques
   «alignwide» que centra WordPress. Los dos deben moverse juntos.

   Usamos un solo escalón, «container-xxl» (1320 px), en lugar de los
   cinco de Bootstrap. Razón medida, no estética: WordPress escribe el
   ancho de cada bloque «constrained» como literal dentro del marcado
   (wideSize), y ese literal no entiende de consultas de medios. Con
   los cinco escalones, entre 1200 y 1400 px la portada se alineaba a
   62 px y las secciones de WordPress a 42: veinte píxeles de desfase.
   Con un único máximo, por debajo de 1320 todo pasa a ser fluido con
   el mismo respiro lateral y las dos mitades del sitio coinciden
   siempre. Verificado a 1536, 1280, 1024 y 390 px. */
:root {
  --ribell-ancho: 82.5rem;   /* 1320 px, container-xxl */
  --ribell-scrollbar: 0px;
  --ribell-borde: max(var(--wp--custom--gutter), calc((100vw - var(--ribell-scrollbar) - var(--ribell-ancho)) / 2));
}

/* --- Portada --- */
.ribell-portada__texto,
.ribell-portada__accesos {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--ribell-borde);
}
.ribell-portada__accesos { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* El círculo de progreso vuelve a colgar del borde compartido */
.ribell-portada__progreso {
  position: static;
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  margin-right: .6rem;
  flex: none;
}

/* --- Bloques de línea de negocio a sangre --- */
/* El bloque izquierdo alinea con el borde global; el derecho, con el
   arranque de su propia columna más el mismo respiro. */
/* WordPress centra el contenido de un contenedor «constrained» con
   margin:auto !important. Eso desplazaba el texto del bloque 34 px a la
   derecha del resto del sitio. Lo alineamos a la izquierda conservando
   su medida de lectura. */
.ribell-service > .wp-block-cover__inner-container {
  max-width: none;
  margin-inline: 0;
}
.ribell-service > .wp-block-cover__inner-container > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 34rem;
}
/* El bloque trae su relleno como estilo en línea, así que hace falta
   !important para que respete el borde compartido del sitio. */
.wp-block-columns > .wp-block-column:first-child .ribell-service {
  padding-left: var(--ribell-borde) !important;
  padding-right: var(--wp--custom--gutter) !important;
}
.wp-block-columns > .wp-block-column:last-child .ribell-service {
  padding-left: var(--wp--custom--gutter) !important;
  padding-right: var(--ribell-borde) !important;
}

/* En una sola columna, ambos usan el borde global */
@media (max-width: 47.99em) {
  .wp-block-columns > .wp-block-column .ribell-service {
    padding-left: var(--ribell-borde) !important;
    padding-right: var(--ribell-borde) !important;
  }
}

/* --- Medida máxima del texto corrido, coherente en todo el sitio --- */
.ribell-portada__titulo { max-width: 15ch; }
.ribell-acceso__texto   { max-width: 34ch; }


/* La cabecera cierra en el mismo borde que el resto del sitio */
.ribell-cabecera__acciones { padding-right: var(--ribell-borde); }
.ribell-cabecera__logo { padding-left: clamp(1rem, 2vw, 2rem); }




/* =========================================================
   28. Envoltura interior en las aperturas
   -----------------------------------------------------------
   Un contenedor «constrained» centra a sus hijos en cuanto tienen
   ancho máximo, así que la entradilla quedaba flotando en mitad de
   la sección. La solución no es forzar margin:0 —eso la pegaba al
   relleno exterior— sino meter el contenido en una caja interior
   que sí arranca en el borde del sitio; dentro de ella el flujo es
   normal y todo alinea a la izquierda.
   ========================================================= */
.ribell-apertura > * { margin-left: 0; margin-right: 0; max-width: none; }
.ribell-apertura .t-measure { max-width: min(46ch, var(--ribell-ancho)); }
.ribell-apertura .t-measure-wide { max-width: min(62ch, var(--ribell-ancho)); }


/* --- Tarjeta sin foto: sólo texto, como las de noticias de Cerrejón --- */
.ribell-tarjeta--plana .ribell-tarjeta__cuerpo {
  padding-top: 2.25rem;
  min-height: 15rem;
}
.ribell-tarjeta--plana .ribell-tarjeta__titulo { margin-top: .75rem; }


/* El grupo que contiene las tarjetas sigue siendo «is-layout-flow» para
   WordPress, que añade margen superior a todos los hijos menos al primero.
   Sobre una rejilla eso desalineaba la segunda y la tercera tarjeta. */
.ribell-tarjetas > *,
.ribell-portada__accesos > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}


/* Cuerpo de documento: arranca en el borde del sitio, no centrado, y
   limita la línea a una medida de lectura cómoda. */
.ribell-documento > * {
  max-width: 46rem;
  margin-left: 0;
  margin-right: 0;
}


/* =========================================================
   29. Volver arriba
   -----------------------------------------------------------
   Círculo azul en la esquina inferior derecha, alineado con el
   borde del sitio. Aparece deslizándose al pasar la primera
   pantalla y se esconde de nuevo arriba del todo.
   ========================================================= */
.ribell-arriba {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 40;                         /* por debajo del menú lateral */
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--navy);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 .5rem 1.5rem rgba(22, 29, 51, .22);
  opacity: 0;
  transform: translateY(.75rem);
  pointer-events: none;
  transition: opacity .3s var(--wp--custom--ease),
              transform .3s var(--wp--custom--ease),
              background-color .2s ease;
}
.ribell-arriba[hidden] { display: grid; }   /* el JS maneja la visibilidad */
.ribell-arriba.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.ribell-arriba:hover { background: var(--wp--preset--color--red); }
.ribell-arriba:focus-visible {
  outline: 2px solid var(--wp--preset--color--amber);
  outline-offset: 3px;
}
.ribell-arriba svg { transition: transform .2s var(--wp--custom--ease); }
.ribell-arriba:hover svg { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .ribell-arriba, .ribell-arriba svg { transition: none; }
}


/* =========================================================
   30. Saltar al contenido
   -----------------------------------------------------------
   Enlace de accesibilidad de WordPress. Invisible siempre salvo
   cuando alguien llega con el tabulador; entonces aparece como
   una píldora azul de la marca, no con la caja gris de serie.
   ========================================================= */
.skip-link.screen-reader-text:focus {
  position: fixed !important;
  top: .75rem !important;
  left: .75rem !important;
  z-index: 100000;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  display: inline-block;
  padding: .65rem 1.1rem !important;
  border-radius: 999px;
  background: var(--wp--preset--color--navy) !important;
  color: #fff !important;
  font: 600 .8rem/1 var(--wp--preset--font-family--inter) !important;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 .5rem 1.5rem rgba(22, 29, 51, .25) !important;
  outline: 2px solid var(--wp--preset--color--amber);
  outline-offset: 2px;
}


/* =========================================================
   31. Esquinas de las imágenes
   -----------------------------------------------------------
   Toda imagen de contenido lleva esquinas redondeadas, con el
   mismo radio en todo el sitio. Quedan fuera, y rectas, las del
   carrusel y las que van de fondo bajo una trama de color
   (bloques «cover»): esas llenan su caja de borde a borde.

   El !important vence al border-radius que algunos bloques traen
   escrito en línea (varios venían con 0px).
   ========================================================= */
.wp-block-image img {
  border-radius: var(--wp--custom--radius--lg) !important;
}

/* En las tarjetas la foto es la cabecera: se redondea la tarjeta
   entera y la foto hereda las dos esquinas de arriba. */
.ribell-tarjeta {
  border-radius: var(--wp--custom--radius--lg);
  isolation: isolate;   /* Safari: sin esto, el zoom de la foto al pasar el ratón asoma por las esquinas */
}

/* Por si alguna imagen de contenido acabara dentro de un fondo o del
   carrusel, allí manda la regla de borde a borde. */
.wp-block-cover img,
.ribell-portada img { border-radius: 0 !important; }

/* =========================================================
   32. Iconos
   -----------------------------------------------------------
   Generado por iconos.py. Cada icono se elige por el destino del
   enlace, así que sirve igual en español y en inglés sin tocar
   el contenido de las páginas. Son decorativos: el texto ya dice
   lo mismo, por eso van en pseudoelementos y no en el marcado.
   ========================================================= */

/* --- Tarjetas de políticas: círculo con tinte rojo sobre el antetítulo --- */
.ribell-tarjeta--plana .ribell-tarjeta__cuerpo::before {
  content: none;
  flex: none;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: rgba(202, 76, 78, .09) var(--ribell-icono) center / 1.45rem no-repeat;
}
.ribell-tarjeta--plana:has(a[href*="/sg-sst/"]) .ribell-tarjeta__cuerpo::before,
.ribell-tarjeta--plana:has(a[href*="/ohs-policy/"]) .ribell-tarjeta__cuerpo::before {
  content: "";
  --ribell-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23ca4c4e%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l7 3v5c0 4.5-3 8.4-7 10-4-1.6-7-5.5-7-10V6z%22/%3E%3Cpath d=%22M9 12l2 2 4-4%22/%3E%3C/svg%3E");
}
.ribell-tarjeta--plana:has(a[href*="/funciones-y-responsabilidades/"]) .ribell-tarjeta__cuerpo::before,
.ribell-tarjeta--plana:has(a[href*="/ohs-roles-and-responsibilities/"]) .ribell-tarjeta__cuerpo::before {
  content: "";
  --ribell-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23ca4c4e%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%229%22 cy=%228%22 r=%223.2%22/%3E%3Cpath d=%22M3.5 20c.4-3.2 2.8-5.5 5.5-5.5s5.1 2.3 5.5 5.5%22/%3E%3Cpath d=%22M15.5 4.8a3.2 3.2 0 010 6.3%22/%3E%3Cpath d=%22M17.5 14.7c1.8.7 3 2.6 3.2 5.3%22/%3E%3C/svg%3E");
}
.ribell-tarjeta--plana:has(a[href*="/seguridad-vial/"]) .ribell-tarjeta__cuerpo::before,
.ribell-tarjeta--plana:has(a[href*="/road-safety-policy/"]) .ribell-tarjeta__cuerpo::before {
  content: "";
  --ribell-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23ca4c4e%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222.2%22/%3E%3Cpath d=%22M12 14.2V21M9.9 11.3L3.3 10M14.1 11.3l6.6-1.3%22/%3E%3C/svg%3E");
}
.ribell-tarjeta--plana:has(a[href*="/sarlaft/"]) .ribell-tarjeta__cuerpo::before,
.ribell-tarjeta--plana:has(a[href*="/anti-money-laundering-policy/"]) .ribell-tarjeta__cuerpo::before {
  content: "";
  --ribell-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23ca4c4e%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%226.5%22/%3E%3Cpath d=%22M20.5 20.5l-4.9-4.9%22/%3E%3Cpath d=%22M8.5 11h5%22/%3E%3C/svg%3E");
}
.ribell-tarjeta--plana:has(a[href*="/codigo-de-etica/"]) .ribell-tarjeta__cuerpo::before,
.ribell-tarjeta--plana:has(a[href*="/code-of-ethics/"]) .ribell-tarjeta__cuerpo::before {
  content: "";
  --ribell-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23ca4c4e%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 4v16M7.5 20h9M5 7h14%22/%3E%3Cpath d=%22M5 7l-2.5 6a2.5 2.5 0 005 0zM19 7l-2.5 6a2.5 2.5 0 005 0z%22/%3E%3C/svg%3E");
}
.ribell-tarjeta--plana:has(a[href*="/datos-personales/"]) .ribell-tarjeta__cuerpo::before,
.ribell-tarjeta--plana:has(a[href*="/personal-data-policy/"]) .ribell-tarjeta__cuerpo::before {
  content: "";
  --ribell-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23ca4c4e%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%2210.5%22 width=%2214%22 height=%2210%22 rx=%222%22/%3E%3Cpath d=%22M8 10.5v-3a4 4 0 018 0v3M12 14.5V17%22/%3E%3C/svg%3E");
}

/* --- Botones: icono a la izquierda, en el color del propio texto --- */
.wp-block-button__link { display: inline-flex; align-items: center; gap: .6em; }
.wp-block-button__link::before {
  content: none;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--ribell-icono) center / contain no-repeat;
          mask: var(--ribell-icono) center / contain no-repeat;
}
.wp-block-button__link[href^="tel:"]::before {
  content: "";
  --ribell-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 4h3.5l1.8 4.5-2.3 1.4a11 11 0 005.1 5.1l1.4-2.3L19 16.5V20a1 1 0 01-1 1A16 16 0 014 5a1 1 0 011-1z%22/%3E%3C/svg%3E");
}
.wp-block-button__link[href^="mailto:"]::before {
  content: "";
  --ribell-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222%22/%3E%3Cpath d=%22M3.5 6.5l8.5 6.5 8.5-6.5%22/%3E%3C/svg%3E");
}
.wp-block-button__link[href*="/contacto/"]::before,
.wp-block-button__link[href*="/contact/"]::before {
  content: "";
  --ribell-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 5h16v11H9l-5 4z%22/%3E%3Cpath d=%22M8 9.5h8M8 12.5h5%22/%3E%3C/svg%3E");
}
.wp-block-button__link[href*="/portafolio/"]::before,
.wp-block-button__link[href*="/portfolio/"]::before {
  content: "";
  --ribell-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%224%22 width=%227%22 height=%227%22 rx=%221.5%22/%3E%3Crect x=%2213%22 y=%224%22 width=%227%22 height=%227%22 rx=%221.5%22/%3E%3Crect x=%224%22 y=%2213%22 width=%227%22 height=%227%22 rx=%221.5%22/%3E%3Crect x=%2213%22 y=%2213%22 width=%227%22 height=%227%22 rx=%221.5%22/%3E%3C/svg%3E");
}
.wp-block-button__link[href*="/nosotros/"]::before,
.wp-block-button__link[href*="/about-us/"]::before {
  content: "";
  --ribell-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 21V5l8-2v18M12 8h8v13M3 21h18M7.5 8h1M7.5 12h1M7.5 16h1M15.5 12h1M15.5 16h1%22/%3E%3C/svg%3E");
}
.wp-block-button__link[href*="/politicas/"]::before,
.wp-block-button__link[href*="/policies/"]::before {
  content: "";
  --ribell-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l7 3v5c0 4.5-3 8.4-7 10-4-1.6-7-5.5-7-10V6z%22/%3E%3Cpath d=%22M9 12l2 2 4-4%22/%3E%3C/svg%3E");
}
.wp-block-button__link[href*="/ayuda-clientes/"]::before,
.wp-block-button__link[href*="/client-portal/"]::before {
  content: "";
  --ribell-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 17l5-5-5-5M15 12H3%22/%3E%3Cpath d=%22M14 4h4a2 2 0 012 2v12a2 2 0 01-2 2h-4%22/%3E%3C/svg%3E");
}


/* =========================================================
   33. Formulario de contacto (Contact Form 7)
   -----------------------------------------------------------
   CF7 envuelve cada campo en sus propios <span>. Estas reglas
   hacen que el formulario real se vea igual que la maqueta y
   dan forma a los avisos de error y de envío.
   ========================================================= */
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 .ribell-field--check .wpcf7-form-control-wrap { display: inline; }
.wpcf7 .wpcf7-list-item { margin: 0; }

/* Aviso bajo cada campo que no valida */
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: .4rem;
  font-size: .8rem;
  color: var(--wp--preset--color--red);
}
.wpcf7 .wpcf7-not-valid:is(input, select, textarea) {
  border-color: var(--wp--preset--color--red) !important;
}

/* Botón de envío: el mismo de todo el sitio */
.ribell-form__enviar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: var(--wp--preset--spacing--20);
}
.ribell-form__enviar input[type="submit"] { cursor: pointer; }
.ribell-form__enviar input[type="submit"]:disabled { opacity: .6; cursor: progress; }
.wpcf7 .wpcf7-spinner { margin: 0; }

/* Aviso general tras enviar */
.wpcf7 form .wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border: 0;
  border-left: 3px solid var(--wp--preset--color--muted);
  border-radius: 0 var(--wp--custom--radius--base) var(--wp--custom--radius--base) 0;
  background: #fff;
  font-size: .9rem;
}
.wpcf7 form.sent .wpcf7-response-output          { border-left-color: #2e7d4f; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output          { border-left-color: var(--wp--preset--color--red); }


/* =========================================================
   34. Consultor de vehículos (plugin Gestión de Vehículos Ribell)
   -----------------------------------------------------------
   El plugin trae su propia tarjeta blanca; aquí va dentro de la
   tarjeta de la página, así que se aplana y adopta los campos y
   botones del sitio. El prefijo .wp-site-blocks sube la
   especificidad: la hoja del plugin se imprime después que esta.
   ========================================================= */
.wp-site-blocks .lgvr-widget {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.wp-site-blocks .lgvr-form { gap: .6rem; }
.wp-site-blocks .lgvr-label {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: inherit;
}
.wp-site-blocks .lgvr-widget input[type="text"] {
  padding: .9rem 1rem;
  border: 1px solid rgba(22, 29, 51, .18);
  border-radius: var(--wp--custom--radius--base);
  background: #fff;
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: .12em;
  color: var(--wp--preset--color--contrast);
}
.wp-site-blocks .lgvr-widget input[type="text"]:focus {
  outline: 2px solid var(--wp--preset--color--navy);
  outline-offset: 1px;
  border-color: transparent;
  box-shadow: none;
}

/* Botones: los mismos del sitio */
.wp-site-blocks .lgvr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .85rem 1.4rem;
  border: 1px solid var(--wp--preset--color--navy);
  border-radius: 999px;
  background: transparent;
  color: var(--wp--preset--color--navy);
  font: 600 .9rem/1 var(--wp--preset--font-family--inter);
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.wp-site-blocks .lgvr-btn:hover { background: var(--wp--preset--color--navy); color: #fff; }
.wp-site-blocks .lgvr-btn-primary {
  margin-top: .4rem;
  background: var(--wp--preset--color--red);
  border-color: var(--wp--preset--color--red);
  color: #fff;
}
.wp-site-blocks .lgvr-form .lgvr-btn-primary { align-self: flex-start; }
.wp-site-blocks .lgvr-btn-primary:hover {
  background: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--contrast);
}
.wp-site-blocks .lgvr-btn.lgvr-copied {
  background: #2e7d4f;
  border-color: #2e7d4f;
  color: #fff;
}

/* Resultado de la placa */
.wp-site-blocks .lgvr-card {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 0;
  border-top: 3px solid var(--wp--preset--color--red);
  border-radius: var(--wp--custom--radius--base);
  background: var(--wp--preset--color--base);
}
.wp-site-blocks .lgvr-placa {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: .12em;
}
.wp-site-blocks .lgvr-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.wp-site-blocks .lgvr-error {
  margin: .6rem 0 0;
  padding: .75rem 1rem;
  border: 0;
  border-left: 3px solid var(--wp--preset--color--red);
  border-radius: 0 var(--wp--custom--radius--base) var(--wp--custom--radius--base) 0;
  background: rgba(202, 76, 78, .07);
  color: var(--wp--preset--color--contrast);
  font-size: .9rem;
}

/* Crédito del plugin: discreto, alineado con el formulario */
.wp-site-blocks .lgvr-widget .lgvr-credit {
  margin: 1.5rem 0 0;
  text-align: left;
  font-size: .75rem;
  font-weight: 300;
  color: var(--wp--preset--color--muted);
}
.wp-site-blocks .lgvr-widget .lgvr-credit a { color: inherit; border-bottom: 1px solid currentColor; text-decoration: none; }
.wp-site-blocks .lgvr-widget .lgvr-credit a:hover { color: var(--wp--preset--color--red); }