/* ============================================================================
   ENSŌ UNIVERSE · retiro.css · la reserva del Retiro·IN
   Móvil primero: todo se piensa a 360 px y se abre a partir de 768.
   Colores y letra, los de la portada. Fuentes locales: nada sale a Google.
   ========================================================================== */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('/home/assets/fuentes/jost-latin.woff2?v=20260930') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('/home/assets/fuentes/jost-latin-ext.woff2?v=20260930') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/home/assets/fuentes/cormorant-garamond-latin.woff2?v=20260930') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/home/assets/fuentes/cormorant-garamond-latin-ext.woff2?v=20260930') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url('/home/assets/fuentes/cormorant-garamond-italic-latin.woff2?v=20260930') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --sand: #f5f0e8; --linen: #ede7d9; --terra: #8b6b4a; --charcoal: #2c2925; --mist: #ddd6c8;
  --white: #fdfaf5; --accent: #a0764e; --eg: #4a6b58; --eg-mid: #6b8c78; --eg-pale: #e8f0eb; --eg-deep: #1c2a22;
  --tinta-2: #5c5650; --tinta-3: #6f6a62; --error: #8a3b2e;
  --vivirlo: #5d7a67; --sostenerlo: #7f9a87; --hacerlo-tuyo: #a5b9a8;
  --serif: 'Cormorant Garamond', serif; --sans: 'Jost', sans-serif;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.6; background: var(--sand); color: var(--charcoal); overflow-x: hidden; }
a { color: var(--terra); }
img { max-width: 100%; height: auto; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cabecera y pie */
.rin-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--mist); }
.rin-marca { display: inline-flex; align-items: center; min-height: 44px; }
.rin-marca img { width: 120px; height: auto; }
.rin-cabecera__enlace { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--charcoal); min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.rin-pie { padding: 40px 20px 48px; font-size: 13px; color: var(--tinta-3); border-top: 1px solid var(--mist); display: grid; gap: 6px; }
.rin-pie a { color: var(--tinta-3); }

/* Contenido */
.rin-app { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; }
.rin-cargando { color: var(--tinta-3); }
.rin-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--terra); }
.rin-titulo { font-family: var(--serif); font-weight: 300; font-size: 38px; line-height: 1.1; margin-top: 10px; }
.rin-titulo em { font-style: italic; }
.rin-sub { font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1.3; margin-top: 32px; }
.rin-texto { margin-top: 12px; color: var(--tinta-2); }
.rin-nota { font-size: 14px; color: var(--tinta-3); margin-top: 8px; }
.rin-datos { margin-top: 14px; display: grid; gap: 4px; color: var(--tinta-2); }
.rin-lista { margin: 14px 0 0 1.1em; color: var(--tinta-2); display: grid; gap: 6px; }

/* Tarjetas de la lista de retiros */
.rin-retiros { display: grid; gap: 16px; margin-top: 24px; }
.rin-tarjeta { display: block; background: var(--white); border: 1px solid var(--mist); padding: 22px 20px; text-decoration: none; color: inherit; }
.rin-tarjeta:hover, .rin-tarjeta:focus-visible { border-color: var(--eg-mid); }
.rin-tarjeta__titulo { font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1.15; margin-top: 6px; }
.rin-tarjeta__pie { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 14px; color: var(--tinta-3); }

/* Avisos */
.rin-aviso { margin-top: 20px; padding: 16px 18px; background: var(--eg-pale); border-left: 3px solid var(--eg); color: var(--eg-deep); }
.rin-error { margin-top: 16px; padding: 12px 16px; border-left: 3px solid var(--error); background: #f6e9e5; color: var(--error); }

/* Opciones (camas, personas, formas de pago) */
.rin-opciones { display: grid; gap: 10px; margin-top: 14px; border: 0; }
.rin-opciones legend { font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1.3; margin: 28px 0 4px; }
.rin-opcion { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 16px; background: var(--white); border: 1px solid var(--mist); cursor: pointer; min-height: 44px; }
.rin-opcion input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--eg); }
.rin-opcion:has(input:checked) { border-color: var(--eg); box-shadow: inset 0 0 0 1px var(--eg); }
.rin-opcion:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.rin-opcion__titulo { font-weight: 400; }
.rin-opcion__detalle { display: block; font-size: 14px; color: var(--tinta-3); margin-top: 2px; }
.rin-opcion__precio { display: block; margin-top: 4px; color: var(--charcoal); }

/* Campos */
.rin-campos { display: grid; gap: 14px; margin-top: 14px; }
.rin-campo { display: grid; gap: 6px; }
.rin-campo label { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); }
.rin-campo input, .rin-campo select, .rin-campo textarea {
  font: inherit; font-size: 16px; color: var(--charcoal); background: var(--white); border: 1px solid var(--mist); border-radius: 0;
  padding: 12px 14px; min-height: 48px; width: 100%;
}
.rin-campo textarea { min-height: 96px; resize: vertical; }
.rin-campo input:focus, .rin-campo select:focus, .rin-campo textarea:focus { outline: 2px solid var(--eg-mid); outline-offset: 1px; }
.rin-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rin-trampa input { font-size: 16px; }
.rin-casilla { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin-top: 16px; font-size: 15px; color: var(--tinta-2); cursor: pointer; }
.rin-casilla input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--eg); }

/* v4 · Gastos de preparación: su propia caja, antes de las condiciones */
.rin-gastos { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--mist); border-left: 3px solid var(--accent); background: var(--white); }
.rin-gastos__titulo { font-weight: 500; }
.rin-gastos .rin-casilla { margin-top: 12px; }

/* Botones */
.rin-acciones { display: grid; gap: 10px; margin-top: 28px; }
.rin-boton { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--white); background: var(--eg);
  border: 0; padding: 16px 28px; min-height: 52px; cursor: pointer; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.rin-boton:hover { background: var(--eg-deep); }
.rin-boton:disabled { opacity: .6; cursor: wait; }
.rin-boton--suave { background: transparent; color: var(--charcoal); border: 1px solid var(--charcoal); }
.rin-boton--suave:hover { background: var(--linen); }

/* Resumen del precio */
.rin-resumen { margin-top: 24px; padding: 18px 20px; background: var(--linen); display: grid; gap: 4px; }
.rin-resumen__total { font-family: var(--serif); font-size: 26px; line-height: 1.2; }

/* Bloque separado (formularios de la página de reserva) */
.rin-bloque { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--mist); }

@media (min-width: 480px) {
  .rin-acciones { display: flex; flex-wrap: wrap; }
}
@media (min-width: 768px) {
  .rin-cabecera { padding: 20px 40px; }
  .rin-marca img { width: 140px; }
  .rin-app { padding: 56px 40px 88px; }
  .rin-titulo { font-size: 52px; }
  .rin-campos--dos { grid-template-columns: 1fr 1fr; }
  .rin-pie { padding: 48px 40px 56px; }
}
@media (min-width: 900px) {
  .rin-retiros { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   v6 · La ficha nueva (23/10/2026): portada con pase de fotos, apartados con
   enlace propio, el visor de fotos y la reserva por pasos. Móvil primero.
   ========================================================================== */
.rin-eyebrow { line-height: 1.5; }

/* 1 · Portada: a todo lo ancho, aunque viva dentro de .rin-app */
.rin-portada { position: relative; width: 100vw; margin: -32px calc(50% - 50vw) 0; min-height: min(86svh, 720px); display: flex; align-items: flex-end; overflow: hidden; background: var(--eg-deep); color: var(--white); isolation: isolate; }
.rin-portada__fotos { position: absolute; inset: 0; z-index: -1; }
.rin-portada__fotos::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 42, 34, .86) 0%, rgba(28, 42, 34, .45) 42%, rgba(28, 42, 34, .05) 72%); }
.rin-portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.rin-portada__foto--activa { opacity: 1; animation: rin-acerca 9s ease-out both; }
.rin-portada--parada .rin-portada__foto--activa { animation-play-state: paused; }
@keyframes rin-acerca { from { transform: scale(1.07); } to { transform: scale(1); } }
.rin-portada__texto { width: 100%; max-width: 720px; margin: 0 auto; padding: 96px 20px 40px; }
.rin-portada .rin-eyebrow { color: #f0e3cf; }
.rin-portada__titulo { font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1.05; margin-top: 10px; }
.rin-portada__datos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; font-size: 15px; color: rgba(253, 250, 245, .9); }
.rin-portada__datos span:not(:last-child)::after { content: '·'; margin-left: 14px; opacity: .7; }
.rin-portada__acciones { display: grid; gap: 10px; margin-top: 24px; }
.rin-portada__desde { margin-top: 14px; font-size: 14px; color: rgba(253, 250, 245, .85); }
.rin-boton--claro { background: transparent; color: var(--white); border: 1px solid rgba(253, 250, 245, .8); }
.rin-boton--claro:hover { background: rgba(253, 250, 245, .12); }
.rin-portada__pausa { position: absolute; top: 14px; right: 14px; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(253, 250, 245, .5); border-radius: 999px; background: rgba(28, 42, 34, .35); color: var(--white); font: inherit; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.rin-portada--sin-fotos { width: auto; min-height: 0; margin: 0; background: none; color: inherit; }
.rin-portada--sin-fotos .rin-portada__texto { padding: 0; }
.rin-portada--sin-fotos .rin-eyebrow { color: var(--terra); }
.rin-portada--sin-fotos .rin-portada__datos, .rin-portada--sin-fotos .rin-portada__desde { color: var(--tinta-2); }
.rin-portada--sin-fotos .rin-boton--claro { color: var(--charcoal); border-color: var(--charcoal); }

/* Apartados */
.rin-seccion { margin-top: 64px; scroll-margin-top: 16px; }
.rin-seccion__titulo { font-family: var(--serif); font-weight: 300; font-size: 32px; line-height: 1.1; margin-top: 8px; }
.rin-seccion__sub { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.3; margin-top: 32px; }

/* 2 · Lo que vas a vivir */
.rin-incluye { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.rin-incluye li { position: relative; padding-left: 28px; color: var(--tinta-2); }
.rin-incluye li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 12px; height: 7px; border-left: 1.5px solid var(--eg); border-bottom: 1.5px solid var(--eg); transform: rotate(-45deg); }
.rin-formato { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
.rin-formato__tramo { padding: 16px 18px; background: var(--white); border: 1px solid var(--mist); border-left: 4px solid var(--vivirlo); }
.rin-formato__tramo--2 { border-left-color: var(--sostenerlo); }
.rin-formato__tramo--3 { border-left-color: var(--hacerlo-tuyo); }
.rin-formato__dias { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); }
.rin-formato__nombre { font-family: var(--serif); font-size: 22px; line-height: 1.2; margin-top: 2px; }
.rin-formato__texto { font-size: 15px; color: var(--tinta-2); margin-top: 4px; }

/* 3 · La finca: una tira que se desliza con el dedo */
.rin-tira { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 10px; margin: 18px -20px 0; padding: 0 20px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rin-tira::-webkit-scrollbar { display: none; }
.rin-tira__foto { display: block; padding: 0; border: 0; background: var(--linen); aspect-ratio: 3 / 2; overflow: hidden; scroll-snap-align: start; cursor: zoom-in; }
.rin-tira__foto img, .rin-apto__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rin-tira__pista { margin-top: 6px; }

/* 4 · Dónde vas a dormir */
.rin-aptos { display: grid; gap: 16px; margin-top: 20px; }
.rin-apto { display: grid; align-content: start; background: var(--white); border: 1px solid var(--mist); }
.rin-apto__media { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--linen); aspect-ratio: 3 / 2; overflow: hidden; cursor: zoom-in; }
.rin-apto__mas { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(28, 42, 34, .72); color: var(--white); font-size: 12px; letter-spacing: .08em; }
.rin-apto__cuerpo { padding: 18px 20px 22px; }
.rin-apto__nombre { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; margin-top: 4px; }
.rin-apto__precio { display: grid; gap: 2px; margin-top: 14px; color: var(--tinta-2); }
.rin-apto__precio strong { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--charcoal); }
.rin-apto__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.rin-apto__pie .rin-boton { padding: 12px 20px; min-height: 44px; }
.rin-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--eg-pale); color: var(--eg-deep); font-size: 12px; letter-spacing: .06em; }
.rin-chip--agotado { background: var(--linen); color: var(--tinta-3); }
.rin-plano { margin-top: 8px; }
.rin-plano__lista { list-style: none; margin-top: 10px; }
.rin-plano__lista li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--mist); }
.rin-plano__nombre { font-weight: 400; }
.rin-plano__camas { font-size: 14px; color: var(--tinta-3); }

/* 5 · Precios: elige cama y se ven sus formas de pago de hoy */
.rin-segmentos__titulo { margin-top: 18px; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); }
.rin-segmentos__titulo[hidden] { display: none; }
.rin-segmentos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rin-segmentos[hidden] { display: none; }
.rin-segmento { min-height: 44px; padding: 0 16px; border: 1px solid var(--mist); border-radius: 999px; background: var(--white); color: var(--charcoal); font: inherit; font-size: 14px; cursor: pointer; }
.rin-segmento[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.rin-formas { list-style: none; display: grid; gap: 8px; margin-top: 16px; }
.rin-forma { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 14px 16px; background: var(--white); border: 1px solid var(--mist); }
.rin-forma__nombre { display: grid; font-weight: 400; }
.rin-forma__ajuste { font-size: 13px; font-weight: 300; color: var(--tinta-3); }
.rin-forma__importe { font-family: var(--serif); font-size: 24px; line-height: 1.1; text-align: right; font-variant-numeric: tabular-nums; }
.rin-forma__total { grid-column: 2; font-size: 13px; color: var(--tinta-3); text-align: right; }

/* 6 · Lo que conviene saber: se abre al tocarlo */
.rin-saber { border-top: 1px solid var(--mist); }
.rin-saber:last-of-type { border-bottom: 1px solid var(--mist); }
.rin-seccion > .rin-saber:first-of-type { margin-top: 18px; }
.rin-saber summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 0; font-family: var(--serif); font-size: 20px; cursor: pointer; list-style: none; }
.rin-saber summary::-webkit-details-marker { display: none; }
.rin-saber summary::after { content: '+'; font-family: var(--sans); font-size: 22px; font-weight: 300; color: var(--terra); transition: transform .2s ease; }
.rin-saber[open] summary::after { transform: rotate(45deg); }
.rin-saber__cuerpo { padding-bottom: 18px; }
.rin-saber__cuerpo .rin-texto:first-child, .rin-saber__cuerpo .rin-lista:first-child { margin-top: 0; }

/* 7 · La reserva, por pasos */
.rin-seccion--reserva { margin-left: -20px; margin-right: -20px; padding: 32px 20px 36px; background: var(--white); border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist); }
.rin-reserva { margin-top: 18px; }
.rin-pasos__cuenta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.rin-pasos__lista { list-style: none; display: flex; gap: 6px; margin-top: 8px; }
.rin-pasos__lista li { flex: 1; padding-top: 8px; border-top: 3px solid var(--mist); font-size: 0; color: var(--tinta-3); }
.rin-pasos__lista .rin-pasos__hecho { border-top-color: var(--eg-mid); }
.rin-pasos__lista .rin-pasos__actual { border-top-color: var(--eg); color: var(--charcoal); }
.rin-pasos__resumen { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 16px; padding: 12px 14px; background: var(--linen); font-size: 14px; color: var(--tinta-2); }
.rin-pasos__resumen span:not(:last-child)::after { content: '·'; margin-left: 12px; opacity: .6; }
.rin-pasos__importe { color: var(--charcoal); font-weight: 400; }
.rin-pasos__titulo { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; margin-top: 22px; outline: none; }
.rin-pasos__titulo:focus-visible { outline: 2px solid var(--eg-mid); outline-offset: 4px; }
.rin-pasos__cuerpo .rin-opciones:first-child legend { margin-top: 6px; }
.rin-pasos__nav { display: flex; gap: 10px; margin-top: 26px; }
.rin-pasos__nav .rin-boton { flex: 1; }
.rin-reserva .rin-opcion { background: var(--sand); }
.rin-reserva .rin-resumen { background: var(--sand); }
.rin-reserva .rin-gastos { background: var(--sand); }
.rin-reserva .rin-campo input, .rin-reserva .rin-campo select, .rin-reserva .rin-campo textarea { background: var(--sand); }

/* El botón fijo de abajo */
.rin-fijo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(245, 240, 232, .94); border-top: 1px solid var(--mist); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rin-fijo[hidden] { display: none; }
.rin-fijo .rin-boton { width: 100%; }
.rin-con-fijo .rin-pie { padding-bottom: 104px; }

/* El visor de fotos */
.rin-sin-scroll { overflow: hidden; }
.rin-visor { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #141a16; color: var(--white); }
.rin-visor::backdrop { background: rgba(10, 14, 12, .88); }
.rin-visor__barra { display: flex; align-items: center; gap: 12px; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px 16px; }
.rin-visor__titulo { flex: 1; font-family: var(--serif); font-size: 19px; line-height: 1.2; }
.rin-visor__cuenta { font-size: 13px; color: rgba(253, 250, 245, .75); font-variant-numeric: tabular-nums; }
.rin-visor__cerrar { width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(253, 250, 245, .12); color: var(--white); font-size: 26px; line-height: 1; cursor: pointer; }
.rin-visor__pista { display: flex; height: calc(100% - 64px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rin-visor__pista::-webkit-scrollbar { display: none; }
.rin-visor__foto { flex: 0 0 100%; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px)); scroll-snap-align: center; }
.rin-visor__foto img { width: 100%; max-height: 78vh; max-height: 78dvh; object-fit: contain; }
.rin-visor__foto figcaption { padding: 0 20px; font-size: 14px; color: rgba(253, 250, 245, .8); text-align: center; }

@media (min-width: 480px) {
  .rin-portada__acciones { display: flex; flex-wrap: wrap; }
  .rin-pasos__lista li { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
  .rin-plano__lista li { grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; }
  .rin-plano__camas { text-align: right; }
}
@media (min-width: 768px) {
  .rin-portada { margin-top: -56px; min-height: min(80vh, 760px); }
  .rin-portada__texto { padding: 120px 40px 56px; }
  .rin-portada__titulo { font-size: 68px; }
  .rin-portada__pausa { top: 20px; right: 24px; }
  .rin-seccion { margin-top: 88px; }
  .rin-seccion__titulo { font-size: 42px; }
  .rin-formato { grid-template-columns: repeat(3, 1fr); }
  .rin-tira { grid-auto-columns: 360px; margin: 20px 0 0; padding: 0 0 6px; scroll-padding: 0; }
  .rin-aptos { grid-template-columns: 1fr 1fr; }
  .rin-seccion--reserva { margin-left: 0; margin-right: 0; padding: 40px; border: 1px solid var(--mist); }
  .rin-pasos__nav { justify-content: flex-end; }
  .rin-pasos__nav .rin-boton { flex: 0 0 auto; min-width: 180px; }
  .rin-fijo { left: auto; right: 24px; bottom: 24px; padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .rin-fijo .rin-boton { width: auto; box-shadow: 0 10px 30px rgba(28, 42, 34, .22); }
}
@media (min-width: 1100px) {
  .rin-app { max-width: 880px; }
  .rin-portada__texto { max-width: 880px; }
}
@media (hover: hover) and (pointer: fine) {
  .rin-apto__media img, .rin-tira__foto img { transition: transform .6s ease; }
  .rin-apto__media:hover img, .rin-tira__foto:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .rin-portada__foto { transition: none; }
  .rin-portada__foto--activa { animation: none; }
  .rin-saber summary::after, .rin-apto__media img, .rin-tira__foto img { transition: none; }
}
/* Móvil en horizontal: la portada no puede pedir más alto del que hay */
@media (max-height: 500px) and (orientation: landscape) {
  .rin-portada { min-height: 0; }
  .rin-portada__texto { padding-top: 64px; padding-bottom: 28px; }
  .rin-portada__titulo { font-size: 40px; }
}

/* v8 · el código personal del acceso anticipado, en «Cómo pagas» */
.rin-codigo { margin-top: 20px; padding: 16px 18px; border-radius: 14px; background: var(--linen); }
.rin-codigo__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.rin-codigo__fila .rin-campo input { text-transform: uppercase; letter-spacing: .08em; }
.rin-codigo__fila .rin-boton { min-height: 48px; padding: 0 20px; }
.rin-codigo--puesto { background: var(--eg-pale); display: grid; gap: 6px; }
.rin-codigo__texto { color: var(--eg-deep); }
.rin-codigo .rin-enlace { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--tinta-2); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ============================================================================
   v7 · Formas (23/10/2026): un solo sistema de redondeos y sombras cálidas en
   vez de bordes rectos. Cuatro medidas y nada más: píldora para lo que se
   pulsa, 20 px para las tarjetas, 16 px para las fotos y 14 px para campos,
   opciones y avisos. Los colores y las letras no cambian.
   ========================================================================== */
:root {
  --r-pill: 999px; --r-tarjeta: 20px; --r-foto: 16px; --r-campo: 14px;
  --sombra: 0 1px 2px rgba(44, 41, 37, .04), 0 8px 24px rgba(44, 41, 37, .07);
  --sombra-alta: 0 2px 6px rgba(44, 41, 37, .05), 0 18px 44px rgba(44, 41, 37, .10);
  --linea-suave: rgba(44, 41, 37, .12);
}

/* Lo que se pulsa: píldoras */
.rin-boton { border-radius: var(--r-pill); padding: 14px 28px; min-height: 50px; letter-spacing: .14em; transition: background .2s ease, box-shadow .2s ease, transform .15s ease; }
.rin-boton:active { transform: scale(.98); }
.rin-boton:focus-visible { outline: 2px solid var(--eg-mid); outline-offset: 3px; }
.rin-boton--suave { border-color: var(--linea-suave); background: var(--white); }
.rin-boton--suave:hover { background: var(--linen); }
.rin-apto__pie .rin-boton { padding: 10px 20px; }

/* Portada: a sangre y con las esquinas rectas (Javi, 23/10/2026: el redondeo no va en la portada) */
.rin-portada { border-radius: 0; }

/* Tarjetas: sin borde, con sombra */
.rin-apto, .rin-tarjeta { border: 0; border-radius: var(--r-tarjeta); box-shadow: var(--sombra); overflow: hidden; }
.rin-tarjeta:hover, .rin-tarjeta:focus-visible { box-shadow: var(--sombra-alta); }
.rin-apto__cuerpo { padding: 20px 22px 24px; }
.rin-tira__foto { border-radius: var(--r-foto); }
.rin-forma { border: 0; border-radius: var(--r-campo); box-shadow: var(--sombra); }
.rin-formato__tramo { border: 0; border-radius: var(--r-campo); box-shadow: var(--sombra); }
.rin-formato__dias { display: flex; align-items: center; gap: 8px; }
.rin-formato__dias::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--vivirlo); flex: none; }
.rin-formato__tramo--2 .rin-formato__dias::before { background: var(--sostenerlo); }
.rin-formato__tramo--3 .rin-formato__dias::before { background: var(--hacerlo-tuyo); }
.rin-chip { min-height: 30px; padding: 0 14px; }

/* Avisos, resúmenes y cajas: 14 px y sin raya lateral */
.rin-aviso { border-left: 0; border-radius: var(--r-campo); padding: 16px 18px; }
.rin-error { border-left: 0; border-radius: var(--r-campo); }
.rin-resumen, .rin-pasos__resumen { border-radius: var(--r-campo); }
.rin-gastos { border: 0; border-radius: var(--r-campo); background: var(--linen); }
.rin-reserva .rin-gastos { background: var(--linen); }

/* Opciones: un anillo verde cuando se eligen, en vez de un borde doble */
.rin-opcion { border: 0; border-radius: var(--r-campo); background: var(--white); box-shadow: inset 0 0 0 1px var(--linea-suave); transition: box-shadow .2s ease, background .2s ease; }
.rin-opcion:has(input:checked) { border: 0; box-shadow: inset 0 0 0 2px var(--eg); background: var(--eg-pale); }
.rin-reserva .rin-opcion { background: var(--white); }
.rin-reserva .rin-opcion:has(input:checked) { background: var(--eg-pale); }

/* Campos: redondeados, fondo cálido y el borde solo al tocarlos */
.rin-campo input, .rin-campo select, .rin-campo textarea { border: 0; border-radius: var(--r-campo); background: var(--white); box-shadow: inset 0 0 0 1px var(--linea-suave); transition: box-shadow .2s ease; }
.rin-reserva .rin-campo input, .rin-reserva .rin-campo select, .rin-reserva .rin-campo textarea { background: var(--sand); box-shadow: none; }
.rin-campo input:focus, .rin-campo select:focus, .rin-campo textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--eg-mid); }

/* Lo que conviene saber: cada apartado, una tarjeta que se abre */
.rin-saber { border: 0; border-radius: var(--r-campo); background: var(--white); box-shadow: var(--sombra); padding: 0 18px; margin-top: 10px; }
.rin-saber:last-of-type { border-bottom: 0; }
.rin-seccion > .rin-saber:first-of-type { margin-top: 18px; }
.rin-saber summary { min-height: 60px; }
.rin-saber summary::after { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--linen); font-size: 20px; line-height: 1; flex: none; }

/* La reserva: una tarjeta grande y luminosa; en el móvil, como una hoja que sube */
.rin-seccion--reserva { border: 0; border-radius: 28px 28px 0 0; box-shadow: var(--sombra-alta); }
.rin-pasos__lista li { position: relative; border-top: 0; padding-top: 12px; }
.rin-pasos__lista li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--mist); }
.rin-pasos__lista .rin-pasos__hecho::before { background: var(--eg-mid); }
.rin-pasos__lista .rin-pasos__actual::before { background: var(--eg); }

/* El botón fijo: una píldora que flota, no una barra */
.rin-fijo { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.rin-fijo .rin-boton { box-shadow: 0 10px 30px rgba(28, 42, 34, .28); }

@media (min-width: 768px) {
  .rin-seccion--reserva { border-radius: var(--r-tarjeta); }
  .rin-fijo { left: auto; right: 24px; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .rin-boton, .rin-opcion, .rin-campo input, .rin-campo select, .rin-campo textarea { transition: none; }
  .rin-boton:active { transform: none; }
}

/* ============================================================================
   v10 · Tu plaza: una tarjeta por plaza que se abre con su precio (23/10/2026)
   ========================================================================== */
.rin-ancla { display: block; height: 0; }
.rin-plazas { display: grid; gap: 12px; margin-top: 20px; }
.rin-plaza { display: grid; align-content: start; background: var(--white); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); overflow: hidden; }
.rin-plaza__media { aspect-ratio: 16 / 9; }
.rin-plaza--agotada .rin-plaza__media img { filter: grayscale(.5); opacity: .8; }
.rin-plaza__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 18px 20px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rin-plaza__cabeza:focus-visible { outline: 2px solid var(--eg); outline-offset: -4px; border-radius: var(--r-tarjeta); }
.rin-plaza__textos { display: grid; gap: 2px; min-width: 0; }
.rin-plaza__nombre { font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.rin-plaza__desde { margin-top: 2px; font-size: 14px; color: var(--tinta-2); }
.rin-plaza__lado { display: flex; align-items: center; gap: 10px; flex: none; }
/* v12 · la galleta de «Queda 1», «Quedan 4» o «Reservada», igual en las cuatro tarjetas */
.rin-plaza__lado .rin-chip { justify-content: center; min-width: 108px; min-height: 34px; padding: 0 14px; white-space: nowrap; }
.rin-plaza__flecha { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--linen); }
.rin-plaza__flecha::before { content: ''; width: 8px; height: 8px; border-right: 1.5px solid var(--terra); border-bottom: 1.5px solid var(--terra); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.rin-plaza--abierta .rin-plaza__flecha::before { transform: translateY(2px) rotate(-135deg); }
.rin-plaza__panel { padding: 0 20px 22px; }
.rin-plaza__panel[hidden] { display: none; }
.rin-plaza__panel > .rin-texto:first-child { margin-top: 0; }
.rin-plaza .rin-formas { margin-top: 8px; }
.rin-plaza .rin-forma { background: var(--sand); box-shadow: none; }
.rin-plaza .rin-forma--recomendada { background: var(--eg-pale); box-shadow: inset 0 0 0 1px var(--eg-mid); }
button.rin-forma { -webkit-appearance: none; appearance: none; width: 100%; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: box-shadow .15s ease; }
button.rin-forma { grid-template-columns: minmax(0, 1fr) auto; }
button.rin-forma .rin-forma__total { grid-column: 1 / -1; }
.rin-plaza .rin-forma[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--eg); }
.rin-forma:focus-visible { outline: 2px solid var(--eg); outline-offset: 2px; }
.rin-plaza__accion { margin-top: 18px; }
.rin-plaza__accion .rin-boton { width: 100%; }
.rin-plano { margin-top: 20px; }
.rin-pasos__cambiar { margin-left: auto; min-height: 32px; padding: 0; border: 0; background: none; color: var(--tinta-2); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (min-width: 768px) {
  .rin-plaza { grid-template-columns: 280px minmax(0, 1fr); }
  .rin-plaza__media { aspect-ratio: 4 / 3; align-self: start; }
  .rin-plaza__cabeza { padding: 22px 24px; }
  .rin-plaza__panel { padding: 0 24px 24px; }
  .rin-plaza__accion { display: flex; justify-content: flex-end; }
  .rin-plaza__accion .rin-boton { width: auto; }
}
/* v11 · Desde 900 px, rejilla de 2 + 2: cada tarjeta en vertical (foto arriba) y la
   abierta crece hacia abajo sin mover a las demás de su sitio. */
@media (min-width: 900px) {
  .rin-plazas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
  .rin-plaza { grid-template-columns: 1fr; }
  .rin-plaza__media { aspect-ratio: 3 / 2; align-self: stretch; }
  .rin-plaza__accion .rin-boton { width: 100%; }
  /* media página: el precio en la línea de «Cuántas personas» y los botones debajo, como en el teléfono */
  .rin-plaza .rin-precios__barra > .rin-segmentos { grid-column: 1 / -1; }
  .rin-plaza .rin-precios__cifra { grid-row: 1; }
  .rin-plaza .rin-precios__total { font-size: 44px; }
}
.rin-formas__mas { display: grid; gap: 8px; padding-left: 12px; border-left: 2px solid var(--mist); }
.rin-forma--mas .rin-forma__importe { font-size: 20px; }
.rin-forma--mas .rin-forma__total { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--tinta-2); }
.rin-forma__flecha { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.rin-forma--mas-abierta .rin-forma__flecha { transform: translateY(1px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
  .rin-forma__flecha { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rin-plaza__flecha::before, button.rin-forma { transition: none; }
}

/* ============================================================================
   v9 · Precios: lo elegido, en grande; los 2 pagos, recomendados (23/10/2026)
   ========================================================================== */
/* En el teléfono, el precio va en la línea de «Cuántas personas» y los botones debajo;
   desde 768 px, a la derecha de los botones, en su misma línea. */
.rin-precios__barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px; }
.rin-precios__barra > .rin-segmentos__titulo { grid-column: 1; grid-row: 1; }
.rin-precios__barra > .rin-segmentos { grid-column: 1 / -1; grid-row: 2; }
.rin-precios__cifra { grid-column: 2; grid-row: 1; display: grid; justify-items: end; text-align: right; }
.rin-precios__cifra:empty { display: none; }
.rin-precios__total { font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; color: var(--charcoal); }
.rin-precios__por { margin-top: 6px; font-size: 13px; color: var(--tinta-3); }
.rin-forma__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rin-forma__galleta { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--eg); color: var(--white); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.rin-forma--recomendada { background: var(--eg-pale); box-shadow: inset 0 0 0 1.5px var(--eg-mid), var(--sombra); }
.rin-forma--recomendada .rin-forma__ajuste, .rin-forma--recomendada .rin-forma__total { color: var(--eg); }
@media (min-width: 768px) {
  .rin-precios__barra > .rin-segmentos { grid-column: 1; }
  .rin-precios__cifra { grid-row: 1 / span 2; }
  .rin-precios__total { font-size: 52px; }
}

/* ============================================================================
   v13 · 26/10/2026 · La ficha cuenta el porqué antes de vender, y se mueve como
   la portada de ensouniverse.com: la frase de entrada, el calendario de los 21
   días, las EXPERIENCIAS·IN, «Qué vas a vivir» en tarjetas y el ciclo SYNERGYK.
   ========================================================================== */
:root {
  --eg-dark: #2a3d31; --lila: #a596bc; --lila-hondo: #7a6896;
  --sk-1: #93dcd5; --sk-2: #3b7ea1; --sk-3: #e5c47b; --sk-4: #6b4c8a; --sk-5: #8e5db5;
}

/* Lo que entra al aparecer (retiro.js, animar()). Sin .rin-anima, todo quieto y a la vista. */
.rin-anima .rin-entra { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .9s cubic-bezier(.22, .61, .36, 1); transition-delay: calc(var(--d, 0) * 110ms); }
.rin-anima .rin-entra.rin-visto { opacity: 1; transform: none; }

/* Portada: la línea de los 21 días */
.rin-portada__lema { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 21px; line-height: 1.3; margin-top: 10px; color: rgba(253, 250, 245, .96); max-width: 30ch; text-shadow: 0 1px 14px rgba(28, 42, 34, .6), 0 0 2px rgba(28, 42, 34, .35); }
.rin-portada--sin-fotos .rin-portada__lema { text-shadow: none; }
.rin-portada--sin-fotos .rin-portada__lema { color: var(--eg); }

/* Para esos momentos */
.rin-entrada__frase { position: relative; padding-top: 26px; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 29px; line-height: 1.25; color: var(--eg-dark); }
.rin-entrada__frase::before { content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 1px; background: var(--accent); }
.rin-entrada__texto { margin-top: 14px; }

/* Tus 21 días: el calendario */
.rin-formato-cabeza { display: grid; gap: 28px; margin-top: 4px; }
.rin-cal { background: var(--white); border-radius: var(--r-tarjeta); padding: 20px 16px 18px; box-shadow: var(--sombra-alta); }
.rin-cal__cabeza { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--eg); }
.rin-cal__cabeza span + span { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--accent); }
.rin-cal__rejilla { display: grid; grid-template-columns: 62px repeat(7, 1fr); gap: 6px 4px; align-items: center; }
.rin-cal__ldia { text-align: center; font-size: 10px; letter-spacing: .12em; color: rgba(44, 41, 37, .5); }
.rin-cal__semana { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 13px; line-height: 1.1; color: var(--eg-dark); }
.rin-cal__semana--luego { color: var(--lila-hondo); }
.rin-cal__dia { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.rin-cal__dia i { position: absolute; inset: 8%; border-radius: 50%; background: var(--tono); }
.rin-cal__dia b { position: relative; font-weight: 400; font-size: 11px; color: var(--sobre, var(--white)); }
.rin-cal__dia.es-retiro { --tono: var(--accent); }
.rin-cal__dia.es-s1 { --tono: var(--vivirlo); }
.rin-cal__dia.es-s2 { --tono: var(--sostenerlo); }
.rin-cal__dia.es-s3 { --tono: var(--hacerlo-tuyo); --sobre: var(--eg-dark); }
.rin-cal__dia.es-luego { --tono: var(--lila); --sobre: rgba(44, 41, 37, .6); }
.rin-cal__dia.es-luego i { opacity: var(--o, 1); }
.rin-cal__pie { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(44, 41, 37, .08); font-size: 13px; line-height: 1.55; color: var(--tinta-3); }
.rin-cal__pie em { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--lila-hondo); }
/* Se va llenando: cada día se enciende tras el anterior. */
.rin-anima .rin-cal .rin-cal__dia i { transform: scale(0); opacity: 0; transition: transform .55s cubic-bezier(.34, 1.4, .64, 1), opacity .4s ease; transition-delay: calc(var(--i) * 70ms + .35s); }
.rin-anima .rin-cal .rin-cal__dia b { color: rgba(44, 41, 37, .35); transition: color .4s ease; transition-delay: calc(var(--i) * 70ms + .45s); }
.rin-anima .rin-cal.rin-visto .rin-cal__dia i { transform: none; opacity: var(--o, 1); }
.rin-anima .rin-cal.rin-visto .rin-cal__dia b { color: var(--sobre, var(--white)); }
.rin-leyenda { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.rin-leyenda span { display: inline-flex; align-items: center; gap: 8px; }
.rin-leyenda span::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.rin-leyenda__casa::before { background: linear-gradient(90deg, var(--vivirlo), var(--sostenerlo), var(--hacerlo-tuyo)) !important; }

/* Las EXPERIENCIAS·IN */
.rin-seccion__titulo em { font-style: italic; color: var(--eg); }
.rin-exp { display: grid; gap: 28px; margin-top: 22px; }
.rin-exp__foto { margin: 0; width: min(74%, 300px); }
.rin-exp__marco { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-foto); box-shadow: var(--sombra); }
.rin-exp__marco img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.rin-exp__foto figcaption { margin-top: 12px; font-family: var(--serif); font-size: 19px; line-height: 1.2; }
.rin-exp__foto figcaption span { display: block; margin-top: 4px; font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.rin-exp__texto > .rin-texto:first-child { margin-top: 0; }
.rin-pildoras { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.rin-pildoras li { padding: 8px 14px; border-radius: var(--r-pill); background: var(--eg-pale); color: var(--eg-dark); font-size: 13px; letter-spacing: .04em; }
.rin-pildoras li:last-child { background: rgba(160, 118, 78, .14); color: var(--terra); }

/* Qué vas a vivir: tarjetas con un pequeño ensō */
.rin-vivir { list-style: none; display: grid; gap: 12px; margin-top: 20px; }
.rin-vivir__item { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; padding: 18px 18px 18px 16px; background: var(--white); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); color: var(--tinta-2); }
.rin-vivir__enso { width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--eg); border-right-color: transparent; transform: rotate(-35deg); }
.rin-vivir__item:nth-child(3n+2) .rin-vivir__enso { border-color: var(--accent); border-right-color: transparent; }
.rin-vivir__item:nth-child(3n) .rin-vivir__enso { border-color: var(--vivirlo); border-right-color: transparent; }
.rin-vivir__item p { line-height: 1.55; }

/* SYNERGYK: una banda de lino a sangre, con el ciclo en el centro */
#synergyk { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 48px max(20px, calc(50vw - 360px)) 52px; background: var(--linen); }
.rin-sk { display: grid; gap: 30px; margin-top: 22px; }
.rin-sk__marca { position: relative; margin: 0; width: min(62%, 240px); justify-self: center; }
.rin-sk__marca img { width: 100%; height: auto; opacity: .92; display: block; }
.rin-sk__hilo { display: block; height: 2px; margin: 18px auto 0; width: 72%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--sk-1), var(--sk-2), var(--sk-3), var(--sk-4), var(--sk-5), transparent); opacity: .45; transform-origin: center; }
.rin-anima .rin-sk__marca .rin-sk__hilo { transform: scaleX(0); transition: transform 1.6s cubic-bezier(.22, .61, .36, 1) .5s; }
.rin-anima .rin-sk__marca.rin-visto .rin-sk__hilo { transform: none; }
.rin-sk__ciclo { justify-self: center; }
.rin-enlace-fino { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--eg); text-decoration: none; border-bottom: 1px solid rgba(74, 107, 88, .4); }

/* El ciclo de las cinco estaciones: las mismas reglas que en la portada (style.css, v13). */
.skc.skc--enso {
  --skc-fondo:#1c2a22;
  --S:min(320px, 84vw);          /* lado del círculo */
  --m:calc(var(--S) * .2);       /* medallón */
  background:transparent; padding:0;
  justify-self:center;
}
.skc--enso .skc-camino {
  position:relative; width:var(--S); aspect-ratio:1;
  max-width:none; margin:0 auto; padding:0;
}
.skc--enso .skc-linea { display:none; }   /* la línea recta de la pieza deja su sitio al ensō */

/* El trazo */
.skc--enso .skc-aro { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.skc-aro__tramo {
  fill:none; stroke-width:.55; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  opacity:.85;
  transition:stroke-dashoffset 1.2s cubic-bezier(.45,0,.2,1);
  transition-delay:calc(var(--k) * .42s + .55s);
}
.skc--enso .skc-camino:has(.skc-paso.visto) .skc-aro__tramo { stroke-dashoffset:0; }

/* La luz que recorre el trazo */
.skc--enso .skc-luz {
  position:absolute; inset:14%; border-radius:50%;
  pointer-events:none;
  opacity:0; transition:opacity 1.5s ease 2.6s;
  animation:skc-luz 28s linear infinite;
}
.skc--enso .skc-luz::before {
  content:''; position:absolute; left:50%; top:0;
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:#fdfaf5;
  box-shadow:0 0 6px 2px rgba(229,196,123,.6), 0 0 16px 4px rgba(147,220,213,.35);
}
.skc--enso .skc-camino:has(.skc-paso.visto) .skc-luz { opacity:1; }
@keyframes skc-luz { to { transform:rotate(360deg); } }

/* Las cinco estaciones, en su sitio del círculo (radio 36 %, empezando arriba) */
.skc--enso .skc-lista { position:absolute; inset:0; display:block; }
.skc--enso .skc-paso {
  position:absolute;
  left:calc(50% + 36% * var(--x)); top:calc(50% + 36% * var(--y));
  translate:-50% calc(var(--m) / -2);
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.skc--enso .skc-paso:nth-child(1) { --x:0;     --y:-1; }
.skc--enso .skc-paso:nth-child(2) { --x:.951;  --y:-.309; }
.skc--enso .skc-paso:nth-child(3) { --x:.588;  --y:.809; }
.skc--enso .skc-paso:nth-child(4) { --x:-.588; --y:.809; }
.skc--enso .skc-paso:nth-child(5) { --x:-.951; --y:-.309; }

/* El medallón: una piedra pulida de verde hondo con un filo de su estación. */
.skc--enso .skc-icono {
  width:var(--m);
  background:radial-gradient(circle at 36% 30%, #2e4436 0%, #1c2a22 58%, #15201a 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 42%, transparent),
             inset 0 1px 0 rgba(253,250,245,.08),
             0 10px 22px -8px rgba(28,42,34,.45);
}
.skc--enso .skc-icono svg { transform:scale(.86); }
.skc--enso .skc-paso.visto .skc-icono {
  filter:blur(0) drop-shadow(0 0 9px color-mix(in srgb, var(--c) 38%, transparent));
}
.skc--enso .skc-nombre {
  font-size:8px; letter-spacing:.2em;
  filter:none; color:color-mix(in srgb, var(--c) 52%, #2c2925);
  white-space:nowrap;
  position:relative;
  /* El trazo pasa por debajo de «Gota» y «Fruto»: un difuminado de lino lo tapa sin caja. */
  text-shadow:0 0 3px var(--linen), 0 0 6px var(--linen), 0 0 9px var(--linen), 0 0 12px var(--linen);
}
/* Aparecen en el orden del ciclo. */
.skc--enso .skc-paso:nth-child(2) :is(.skc-icono, .skc-nombre) { transition-delay:.42s; }
.skc--enso .skc-paso:nth-child(3) :is(.skc-icono, .skc-nombre) { transition-delay:.84s; }
.skc--enso .skc-paso:nth-child(4) :is(.skc-icono, .skc-nombre) { transition-delay:1.26s; }
.skc--enso .skc-paso:nth-child(5) :is(.skc-icono, .skc-nombre) { transition-delay:1.68s; }

/* La frase, en el centro del ensō */
.skc--enso .skc-cierre {
  position:absolute; left:50%; top:50%; translate:-50% -46%;
  width:44%; margin:0;
  font-family:'Cormorant Garamond', serif; font-weight:300;
  font-size:calc(var(--S) * .058); line-height:1.25;
  color:rgba(44,41,37,.62);
  opacity:0; transition:opacity 1.6s ease 2.4s;
}
.skc--enso .skc-cierre span { font-style:italic; color:var(--eg); }
.skc--enso .skc-camino:has(.skc-paso.visto) .skc-cierre { opacity:1; }

@media (min-width:480px) {
  .skc--enso .skc-nombre { font-size:9px; }
}

@media (min-width: 480px) {
  .rin-entrada__frase { font-size: 34px; }
  .rin-cal { padding: 24px 22px 22px; }
  .rin-cal__rejilla { grid-template-columns: 76px repeat(7, 1fr); gap: 8px 6px; }
  .rin-cal__semana { font-size: 15px; }
  .rin-cal__dia b { font-size: 12px; }
  .rin-vivir { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .rin-formato-cabeza { grid-template-columns: 1fr minmax(0, 360px); align-items: center; gap: 36px; }
  .rin-exp { grid-template-columns: minmax(0, 260px) 1fr; gap: 40px; align-items: start; }
  .rin-exp__foto { width: 100%; }
  #synergyk { padding-top: 64px; padding-bottom: 68px; }
  .rin-sk { grid-template-columns: auto 1fr; grid-template-areas: 'ciclo marca' 'ciclo texto'; gap: 18px 44px; align-items: center; }
  .rin-sk__ciclo { grid-area: ciclo; }
  .rin-sk__marca { grid-area: marca; justify-self: start; width: 220px; }
  .rin-sk__texto { grid-area: texto; align-self: start; }
  .skc.skc--enso { --S: 300px; }
}
@media (min-width: 1100px) {
  #synergyk { padding-left: max(20px, calc(50vw - 440px)); padding-right: max(20px, calc(50vw - 440px)); }
  .rin-vivir { grid-template-columns: repeat(3, 1fr); }
  .skc.skc--enso { --S: 320px; }
}
/* Móvil en horizontal: el calendario y el ciclo, más pequeños para que quepan */
@media (max-height: 500px) and (orientation: landscape) {
  .rin-formato-cabeza { grid-template-columns: 1fr minmax(0, 320px); align-items: center; }
  .skc.skc--enso { --S: min(280px, 70vh); }
}
@media (prefers-reduced-motion: reduce) {
  .rin-anima .rin-entra { opacity: 1; transform: none; transition: none; }
  .skc-aro__tramo { stroke-dashoffset: 0; transition: none; }
  .skc--enso .skc-luz { animation: none; opacity: 0; }
  .skc--enso .skc-cierre { opacity: 1; transition: none; }
}

/* ============================================================================
   v15 · 27/10/2026 · cabecera común con la portada, pase de fotos sin
   reencuadre, frases que se suceden, «Tus 21 días» con más aire y su ventana,
   Home en lo que los hace distintos, y la luz del ensō de SYNERGYK.
   ========================================================================== */

/* La cabecera: la misma que la portada de ensouniverse.com (style.css y
   contacto.css). Aquí va pegada arriba en vez de fija, para no tapar la portada. */
.site-header { position: sticky; top: 0; z-index: 500; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; padding-top: calc(18px + env(safe-area-inset-top)); background: rgba(245, 240, 232, .96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid transparent; transition: border-color .4s; }
.site-header.scrolled { border-color: var(--mist); }
.logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img { height: 30px; width: auto; }
.header-acciones { display: flex; align-items: center; gap: 12px; }
.header-login, .header-contacto { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--eg); text-decoration: none; padding: 9px 2px; white-space: nowrap; border-bottom: 1.5px solid transparent; transition: border-color .25s; }
.header-login:hover, .header-login:focus-visible, .header-contacto:hover, .header-contacto:focus-visible { border-color: var(--eg); outline: none; }
.header-cta { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--eg); border: 1.5px solid var(--eg); padding: 9px 18px; text-decoration: none; white-space: nowrap; transition: background .25s, color .25s; }
.header-cta:hover, .header-cta:focus-visible { background: var(--eg); color: var(--white); outline: none; }
.header-login[hidden], .header-cta[hidden] { display: none; }
/* El logo se escribe de izquierda a derecha al llegar, como en la portada. */
@property --escrito { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
.logo-img { -webkit-mask-image: linear-gradient(90deg, #000 var(--escrito), transparent calc(var(--escrito) + 14%)); mask-image: linear-gradient(90deg, #000 var(--escrito), transparent calc(var(--escrito) + 14%)); animation: logo-escribe 1.8s .15s cubic-bezier(.45, 0, .25, 1) both; }
@keyframes logo-escribe { from { --escrito: -14%; } to { --escrito: 100%; } }
.rin-seccion { scroll-margin-top: 96px; }   /* las anclas no quedan debajo de la cabecera */

/* Pase de fotos: la que se va conserva su acercamiento mientras se funde. */
.rin-portada__foto { backface-visibility: hidden; will-change: opacity, transform; }
.rin-portada__foto--sale { animation: rin-acerca 9s ease-out both; }
.rin-portada--parada .rin-portada__foto--sale { animation-play-state: paused; }

/* La línea de la portada: más ancha en pantalla grande, y la segunda frase aparte. */
.rin-portada__lema { max-width: 32ch; }
.rin-portada__lema-fin { display: block; margin-top: 8px; color: #f0e3cf; }

/* Las frases de entrada: todas en la misma celda, se suceden con un fundido. */
.rin-frases { display: grid; }
.rin-frases__una { grid-area: 1 / 1; }
.rin-entrada__frase--rota .rin-frases__una { opacity: 0; transform: translateY(8px); transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.22, .61, .36, 1); }
.rin-entrada__frase--rota .rin-frases__una.es-actual { opacity: 1; transform: none; }
.rin-frases__pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.rin-frases__puntos { display: flex; gap: 8px; }
.rin-frases__puntos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(42, 61, 49, .18); transition: background .6s ease, transform .6s ease; }
.rin-frases__puntos i.es-actual { background: var(--accent); transform: scale(1.35); }
.rin-frases__pausa { min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; background: none; font-family: var(--sans); font-style: normal; font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); cursor: pointer; }
.rin-frases__pausa:focus-visible { outline: 2px solid var(--eg-mid); outline-offset: 2px; }

/* Tus 21 días: aire entre el título y el calendario, y el texto en dos párrafos. */
.rin-formato-cabeza { margin-top: 28px; gap: 32px; }
.rin-formato__intro > .rin-texto:first-child { margin-top: 0; }
.rin-formato__intro > .rin-texto + .rin-texto { margin-top: 14px; }
.rin-formato__mas { margin-top: 24px; }
.rin-galleta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 16px; border: 1px solid var(--linea-suave); border-radius: var(--r-pill); background: var(--white); box-shadow: var(--sombra); color: var(--eg-dark); font: inherit; font-size: 15px; letter-spacing: .01em; cursor: pointer; transition: box-shadow .2s ease, transform .15s ease; }
.rin-galleta:hover { box-shadow: var(--sombra-alta); }
.rin-galleta:active { transform: scale(.98); }
.rin-galleta:focus-visible { outline: 2px solid var(--eg-mid); outline-offset: 3px; }
.rin-galleta__enso { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--accent); border-right-color: transparent; transform: rotate(-35deg); }

/* La ventana de «Los 21 días, paso a paso»: a pantalla completa en el teléfono. */
.rin-modal { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 18px 20px 40px; padding-top: calc(18px + env(safe-area-inset-top)); border: 0; background: var(--sand); color: var(--charcoal); overflow-y: auto; overscroll-behavior: contain; }
.rin-modal::backdrop { background: rgba(28, 42, 34, .5); }
.rin-modal__barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rin-modal__cerrar { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--white); box-shadow: var(--sombra); font: inherit; font-size: 24px; line-height: 1; color: var(--charcoal); cursor: pointer; }
.rin-modal__cerrar:focus-visible { outline: 2px solid var(--eg-mid); outline-offset: 2px; }
.rin-modal__titulo { font-family: var(--serif); font-weight: 300; font-size: 32px; line-height: 1.1; margin-top: 10px; }
.rin-modal__titulo em { font-style: italic; color: var(--eg); }
.rin-pasos-21 { list-style: none; margin-top: 26px; }
.rin-paso21 { position: relative; padding: 0 0 26px 30px; }
.rin-paso21::before { content: ''; position: absolute; left: 0; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--tono); }
.rin-paso21::after { content: ''; position: absolute; left: 6px; top: 23px; bottom: 3px; width: 1px; background: rgba(44, 41, 37, .14); }
.rin-paso21:last-child { padding-bottom: 10px; }
.rin-paso21:last-child::after { display: none; }
.rin-paso21.es-reserva { --tono: #c9bfae; }
.rin-paso21.es-retiro { --tono: var(--accent); }
.rin-paso21.es-s1 { --tono: var(--vivirlo); }
.rin-paso21.es-s2 { --tono: var(--sostenerlo); }
.rin-paso21.es-s3 { --tono: var(--hacerlo-tuyo); }
.rin-paso21.es-luego { --tono: var(--lila); }
.rin-paso21__cuando { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); }
.rin-paso21__nombre { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; margin-top: 2px; }
.rin-paso21 > .rin-texto { margin-top: 8px; }
.rin-paso21__dias { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
.rin-paso21__dias li { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: baseline; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.3; color: var(--eg-dark); }
.rin-paso21__dias span { font-family: var(--sans); font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.rin-modal__nota { margin-top: 8px; padding: 14px 16px; border-radius: var(--r-campo); background: var(--linen); }

/* Lo que los hace distintos: las EXPERIENCIAS·IN y Ensō Universe Home. */
.rin-exp + .rin-exp { margin-top: 48px; padding-top: 44px; border-top: 1px solid var(--linea-suave); }
.rin-exp--home .rin-exp__foto { width: 100%; }
.rin-exp--home .rin-exp__marco { aspect-ratio: 3 / 2; }
.rin-exp--home .rin-exp__marco img { object-position: 50% 50%; }
.rin-exp--home .rin-pildoras li, .rin-exp--home .rin-pildoras li:last-child { background: rgba(93, 122, 103, .12); color: var(--vivirlo); }

@media (min-width: 480px) {
  .site-header { padding: 20px 28px; padding-top: calc(20px + env(safe-area-inset-top)); }
  .logo-img { height: 32px; }
}
@media (min-width: 768px) {
  .site-header { padding: 22px 44px; padding-top: calc(22px + env(safe-area-inset-top)); }
  .logo-img { height: 34px; }
  .header-cta { font-size: 10.5px; padding: 10px 22px; }
  .rin-portada__lema { max-width: 40rem; font-size: 24px; }
  .rin-formato-cabeza { margin-top: 36px; gap: 44px; }
  .rin-exp--home { grid-template-columns: 1fr minmax(0, 320px); }
  .rin-exp--home .rin-exp__foto { order: 2; }
  .rin-exp--home .rin-exp__texto { order: 1; }
  .rin-modal { max-width: 640px; height: auto; max-height: 88vh; margin: auto; padding: 30px 40px 34px; border-radius: var(--r-tarjeta); box-shadow: var(--sombra-alta); }
  .rin-modal__titulo { font-size: 38px; }
}
@media (min-width: 900px) {
  .site-header { padding: 24px 60px; padding-top: calc(24px + env(safe-area-inset-top)); }
  .logo-img { height: 36px; }
  .header-cta { padding: 10px 26px; }
}
@media (min-width: 1100px) {
  .rin-portada__lema { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-img { animation: none; -webkit-mask-image: none; mask-image: none; }
  .rin-entrada__frase--rota .rin-frases__una { transform: none; transition: opacity .6s ease; }
  .rin-frases__puntos i, .rin-galleta { transition: none; }
}

/* ══════════════════════════════════════════════════════
   v15 · 27/10/2026 · La luz que recorre el ensō de SYNERGYK, con más presencia
   (núcleo cálido, halo y una estela corta), y cada estación se enciende cuando
   la luz pasa por ella: su filo brilla y late. La vuelta dura 28 s y empieza
   arriba, así que la luz llega a la estación k (en el sentido del reloj) a los
   k × 5,6 s; el filo de cada una va con ese mismo retraso. Igual en la portada
   (style.css) y en la ficha del retiro (retiro/retiro.css).
══════════════════════════════════════════════════════ */
.skc--enso .skc-luz::before {
  width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  background:radial-gradient(circle, #fffdf6 0 38%, #f5e4bb 62%, rgba(229,196,123,0) 100%);
  box-shadow:0 0 10px 4px rgba(253,250,245,.75), 0 0 26px 10px rgba(229,196,123,.45), 0 0 52px 18px rgba(147,220,213,.22);
  animation:skc-luz-respira 2.8s ease-in-out infinite;
}
.skc--enso .skc-luz::after {
  content:''; position:absolute; left:50%; top:0;
  width:38px; height:2px; margin:-1px 0 0 -38px; border-radius:2px;
  background:linear-gradient(90deg, rgba(253,250,245,0), rgba(253,250,245,.75));
}
@keyframes skc-luz-respira { 50% { transform:scale(1.3); } }

.skc--enso .skc-icono::before {
  content:''; position:absolute; inset:-4px; border-radius:50%; pointer-events:none;
  border:1.5px solid var(--c); opacity:0;
  box-shadow:0 0 16px 3px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--c) 35%, transparent);
  animation:skc-toque 28s linear infinite;
  animation-delay:calc(var(--est) * 5.6s - .5s);
}
.skc--enso .skc-paso:nth-child(1) { --est:0; }
.skc--enso .skc-paso:nth-child(2) { --est:1; }
.skc--enso .skc-paso:nth-child(3) { --est:2; }
.skc--enso .skc-paso:nth-child(4) { --est:3; }
.skc--enso .skc-paso:nth-child(5) { --est:4; }
@keyframes skc-toque {
  0%   { opacity:0;  transform:scale(.95); }
  2%   { opacity:1;  transform:scale(1.06); }
  5%   { opacity:.8; transform:scale(1.02); }
  10%  { opacity:0;  transform:scale(1.14); }
  100% { opacity:0;  transform:scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .skc--enso .skc-icono::before, .skc--enso .skc-luz::before { animation:none; }
}
/* En el teléfono, la fecha y el aviso de plazas, cada uno en su línea: el punto
   que los separa se quedaba colgando al final de la primera. */
@media (max-width: 767px) {
  .rin-portada__datos { flex-direction: column; gap: 2px; }
  .rin-portada__datos span:not(:last-child)::after { content: none; }
}

/* ============================================================================
   v16 · 27/10/2026 · las frases se eligen tocando su punto (sin botón de pausa)
   y el párrafo de los días presenciales de la ventana, en recuadro.
   ========================================================================== */
.rin-frases__pie { justify-content: flex-start; margin-top: 10px; }
/* Cada punto es un botón con su zona de toque; el punto se ve pequeño dentro. */
.rin-frases__puntos { display: flex; flex: 1; max-width: 352px; margin-left: -18px; gap: 0; }
.rin-frases__punto { flex: 1 1 0; max-width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.rin-frases__puntos .rin-frases__punto i { width: 7px; height: 7px; border-radius: 50%; background: rgba(42, 61, 49, .2); transition: background .6s ease, transform .6s ease; }
.rin-frases__punto:hover i { background: rgba(160, 118, 78, .55); }
.rin-frases__puntos .rin-frases__punto[aria-current="true"] i { background: var(--accent); transform: scale(1.4); }
.rin-frases__punto:focus-visible { outline: 2px solid var(--eg-mid); outline-offset: -8px; border-radius: 50%; }
.rin-paso21__destacado { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-campo); background: var(--linen); color: var(--tinta-2); }
@media (prefers-reduced-motion: reduce) { .rin-frases__puntos .rin-frases__punto i { transition: none; } }

/* ══════════════════════════════════════════════════════
   v17 · 27/10/2026 · Más contraste en las estaciones de SYNERGYK (Javi: los
   símbolos no terminaban de destacar). El medallión gana un poco de luz por
   dentro, teñida del color de su estación, y los trazos del símbolo engordan y
   brillan algo más. Sigue siendo una piedra verde honda sobre el lino.
   Igual en la portada (style.css) y en la ficha (retiro/retiro.css).
══════════════════════════════════════════════════════ */
.skc--enso .skc-icono {
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 16%, transparent) 0%, transparent 62%),
    radial-gradient(circle at 36% 30%, #34503f 0%, #1f3027 58%, #17231c 100%);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 62%, transparent),
             inset 0 1px 0 rgba(253,250,245,.12),
             0 10px 22px -8px rgba(28,42,34,.5);
}
.skc--enso .skc-icono svg {
  transform:scale(.9);
  filter:brightness(1.3) saturate(1.15) drop-shadow(0 0 1.5px color-mix(in srgb, var(--c) 75%, transparent));
}
.skc--enso .skc-icono svg :is(circle, path) { stroke-width:1.9; }

/* ============================================================================
   v17 · 27/10/2026 · el seguro de viaje incluido, la ventana de los 21 días
   más explicada y viva, y la entrada escalonada de las ventanas.
   ========================================================================== */
/* El seguro: cuatro claves en tarjetas pequeñas */
.rin-seguro__claves { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.rin-seguro__claves li { display: grid; gap: 2px; padding: 16px; border-radius: var(--r-tarjeta); background: var(--white); box-shadow: var(--sombra); font-size: 14px; line-height: 1.4; color: var(--tinta-2); }
.rin-seguro__cifra { font-family: var(--serif); font-size: 24px; line-height: 1.1; color: var(--eg-dark); }
.rin-seguro__claves li:nth-child(2) .rin-seguro__cifra { font-size: 21px; }
#seguro > .rin-nota { margin-top: 14px; }

/* Las ventanas: lo de dentro entra de uno en uno al abrir */
.rin-modal[open] .rin-paso21, .rin-modal[open] .rin-dia21, .rin-modal[open] .rin-seguro__dudas > .rin-saber { animation: rin-sube .7s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--k, 0) * 110ms + 120ms); }
@keyframes rin-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Los cuatro días: tarjetas pequeñas con su número */
.rin-paso21__dias { gap: 10px; }
.rin-paso21__dias .rin-dia21 { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 14px 16px 14px 12px; border-radius: var(--r-campo); background: var(--white); box-shadow: 0 1px 2px rgba(44, 41, 37, .04), 0 6px 18px rgba(44, 41, 37, .05); font-family: var(--sans); font-style: normal; font-size: 15px; }
.rin-paso21__dias .rin-dia21__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(160, 118, 78, .14); color: var(--accent); font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 0; font-variant-numeric: lining-nums; }
.rin-paso21__dias .rin-dia21__titulo { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.25; color: var(--eg-dark); }
.rin-paso21__dias .rin-dia21__texto { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--tinta-2); }

/* La ventana del seguro */
.rin-modal__entrada { margin-top: 10px; }
.rin-seguro__dudas { margin-top: 18px; }
.rin-seguro__pdf { margin-top: 20px; text-decoration: none; }
.rin-modal--seguro > .rin-nota { margin-top: 14px; }

@media (min-width: 768px) {
  .rin-seguro__claves { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rin-modal[open] .rin-paso21, .rin-modal[open] .rin-dia21, .rin-modal[open] .rin-seguro__dudas > .rin-saber { animation: none; }
}

/* v18 · 27/10/2026 · la segunda clave del seguro ya es una cifra (2.500 €): mismo tamaño que las demás. */
.rin-seguro__claves li:nth-child(2) .rin-seguro__cifra { font-size: 24px; }

/* ============================================================================
   v19 · 27/10/2026 · las ventanas a la medida de su contenido en cualquier ancho
   (en el teléfono ocupaban toda la pantalla aunque tuvieran poco dentro), y las
   notas del precio de «Tu plaza» en el recuadro beige.
   ========================================================================== */
/* height: fit-content y no auto: el diálogo modal tiene arriba y abajo a 0, y con auto se estiraba hasta el máximo. */
.rin-modal { width: calc(100% - 24px); max-width: 640px; height: -webkit-fit-content; height: fit-content; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 20px 20px 26px; border-radius: var(--r-tarjeta); box-shadow: var(--sombra-alta); }
.rin-notas-precio { margin-top: 20px; padding: 14px 16px; border-radius: var(--r-campo); background: var(--linen); }
.rin-notas-precio > .rin-nota { margin-top: 0; color: var(--tinta-2); }
.rin-notas-precio > .rin-nota + .rin-nota { margin-top: 10px; }
@media (min-width: 768px) {
  .rin-modal { padding: 30px 40px 34px; }
  .rin-notas-precio { padding: 16px 20px; }
}

/* v20 · 27/10/2026 · con dieciséis frases, los puntos van en dos filas de ocho, cada
   uno con su toque de 44 px. Con ratón y pantalla ancha caben en una sola fila,
   más juntos (30 px basta para un puntero). */
.rin-frases__puntos { flex-wrap: wrap; }
.rin-frases__punto { flex: 0 0 12.5%; }
@media (pointer: fine) and (min-width: 768px) {
  .rin-frases__puntos { max-width: 480px; margin-left: -12px; }
  .rin-frases__punto { flex: 0 0 30px; height: 30px; }
  .rin-frases__punto:focus-visible { outline-offset: -2px; }
}

/* v21 · 27/10/2026 · Veinticinco frases.
   El fundido ya no las cruza: la que se va se apaga sola, en su sitio, y solo
   cuando ya no se ve empieza a subir la siguiente. Nunca hay letras de dos
   frases a la vez.
   Los puntos, una fila fina que marca por dónde va. En el teléfono no se tocan:
   la frase se cambia con el dedo sobre ella (retiro/frases.js v2). Con ratón y
   pantalla ancha siguen siendo botones. */
.rin-entrada__frase--rota .rin-frases__una { opacity: 0; transform: translateY(6px); transition: opacity .45s cubic-bezier(.4, 0, 1, 1), transform 0s linear .45s; }
.rin-entrada__frase--rota .rin-frases__una.es-actual { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.22, .61, .36, 1) .5s, transform 1.2s cubic-bezier(.22, .61, .36, 1) .5s; }
.rin-frases__puntos { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; max-width: 100%; margin-left: 0; }
.rin-frases__punto { flex: 0 1 auto; width: 14px; min-width: 0; max-width: 14px; height: 24px; }
.rin-frases__puntos .rin-frases__punto i { width: 5px; height: 5px; }
.rin-frases__puntos .rin-frases__punto[aria-current="true"] i { transform: scale(1.5); }
@media (pointer: coarse) {
  .rin-frases { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .rin-frases__punto { pointer-events: none; }
}
@media (pointer: fine) and (min-width: 768px) {
  .rin-frases__puntos { max-width: none; }
  .rin-frases__punto { flex: 0 0 26px; max-width: 26px; height: 30px; }
  .rin-frases__puntos .rin-frases__punto i { width: 6px; height: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .rin-entrada__frase--rota .rin-frases__una { transform: none; transition: opacity .35s ease; }
  .rin-entrada__frase--rota .rin-frases__una.es-actual { transform: none; transition: opacity .5s ease .4s; }
}
/* Javi: los puntos, centrados bajo la frase, no pegados a la izquierda. */
.rin-frases__pie { justify-content: center; }


/* v21 · 27/10/2026 · Lo que los hace distintos.
   En pantalla estrecha, la foto de Javier ya no se queda a un lado con un hueco:
   va a todo el ancho y entera (3:2), como la de Home. Con dos columnas vuelve a
   su retrato. Y en Home, con dos columnas, una segunda foto bajo la primera
   llena el hueco que deja el texto; en el teléfono no se ve ni se descarga. */
.rin-exp__foto { width: 100%; }
.rin-exp--in .rin-exp__marco { aspect-ratio: 3 / 2; }
.rin-exp--in .rin-exp__marco img { object-position: 50% 30%; }
.rin-exp__extra { display: none; }
@media (min-width: 768px) {
  .rin-exp--in .rin-exp__marco { aspect-ratio: 4 / 5; }
  .rin-exp--in .rin-exp__marco img { object-position: 50% 20%; }
  .rin-exp--home { grid-template-rows: auto 1fr; }
  .rin-exp--home .rin-exp__texto { grid-column: 1; grid-row: 1 / span 2; }
  .rin-exp--home .rin-exp__foto { grid-column: 2; grid-row: 1; }
  .rin-exp--home .rin-exp__extra { display: block; grid-row: 2; }
}

/* v22 · 27/10/2026 · Treinta y una frases: con ratón, los puntos algo más juntos
   para que la fila quepa en la columna. */
@media (pointer: fine) and (min-width: 768px) {
  .rin-frases__punto { flex: 0 1 auto; width: 22px; max-width: 22px; }
}

/* v22 · 27/10/2026 · Cada día, con su sentido: los cuatro días a la vista. Cada
   tarjeta lleva, junto al número, un ensō que se va cerrando (un cuarto, medio, tres cuartos y
   entero el día del Tagoror). Una columna en el teléfono, dos por dos después. */
.rin-dias { list-style: none; display: grid; gap: 12px; margin-top: 22px; padding: 0; }
.rin-dia { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; align-items: center; padding: 20px; background: var(--white); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); }
.rin-dia__enso { width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--accent) calc(var(--p) * 1%), rgba(42, 61, 49, .12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }
.rin-dia:last-child .rin-dia__enso { background: var(--eg); }
.rin-dia__n { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.rin-dia__nombre, .rin-dia__texto { grid-column: 1 / -1; }
.rin-dia__nombre { margin: 12px 0 0; font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.2; color: var(--eg-dark); }
.rin-dia__texto { margin: 8px 0 0; line-height: 1.6; color: var(--tinta-2); }
#dias .rin-paso21__destacado { margin-top: 18px; }
@media (min-width: 768px) {
  .rin-dias { grid-template-columns: 1fr 1fr; gap: 16px; }
  .rin-dia { padding: 24px; align-content: start; }
  .rin-dia__nombre { font-size: 25px; }
}

/* v23 · 27/10/2026 · Los dos momentos de cada día, bajo su texto: dos pastillas
   discretas; la tarde de SYNERGYK, en su verde. */
.rin-dia__bloques { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 14px 0 0; }
.rin-dia__bloques span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--linen); font-size: 12.5px; letter-spacing: .02em; color: var(--tinta-2); }
.rin-dia__bloques span.es-sk { background: rgba(93, 122, 103, .14); color: var(--eg-dark); }
#dias .rin-texto + .rin-texto { margin-top: 12px; }
/* v24 · la bienvenida y la despedida, con solo el filo: marcan el principio y el
   final, no un momento de trabajo. */
.rin-dia__bloques span.es-borde { background: transparent; box-shadow: inset 0 0 0 1px var(--linea-suave, rgba(42, 61, 49, .16)); }

/* v27 · 27/10/2026 · El seguro, también el día antes y el día después: el regalo,
   destacado en el apartado del seguro, y las casillas de «Tu viaje», que se abren
   solo si se marca que se viene de otra isla o de fuera de Canarias. */
.rin-seguro__regalo { margin-top: 18px; }
.rin-seguro__regalo strong { color: var(--eg-dark); font-weight: 500; }
.rin-viaje { display: grid; gap: 6px; margin-top: 8px; }
.rin-viaje__dias { display: grid; gap: 4px; margin-left: 30px; }
.rin-viaje__dias[hidden] { display: none; }
.rin-viaje__dia { color: var(--eg-dark); }

/* v29 · 27/10/2026 · Los datos de la compra: la fecha de nacimiento en tres partes, los
   campos que ocupan toda la fila y la provincia, que se esconde en España. */
.rin-campo--ancho { grid-column: 1 / -1; }
.rin-campo[hidden] { display: none; }
.rin-campo__etiqueta { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); }
.rin-fecha { display: grid; grid-template-columns: minmax(0, 4.6em) minmax(0, 1fr) minmax(0, 5.6em); gap: 8px; max-width: 26rem; }

/* ── v15 · 28/10/2026 · la ficha escrita en el servidor ─────────────────────
   /api/retiro-pagina.php escribe la ficha en el HTML (buscadores, y quien no
   llega a cargar retiro.js); retiro.js la sustituye por la de siempre en cuanto
   carga. Solo hacen falta estas piezas: lo demás usa las clases de la ficha. */
.rin-plaza__nombre { margin: 0; font-weight: 400; }
.rin-ssr-cabeza, .rin-ssr-foto { cursor: auto; }
.rin-ssr-pasos { margin-top: 24px; }
.rin-ssr-formas { list-style: none; margin: 8px 0 0; padding: 0; }
.rin-ssr-formas li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--linen); }
.rin-ssr-formas small { display: block; font-size: 13px; color: var(--tinta-3); }
.rin-ssr-formas strong { margin-left: auto; font-weight: 500; text-align: right; }

/* ============================================================================
   v20 · 28/10/2026 · el 1 % de Stripe Climate, aparte del recuadro beige del precio:
   su propia caja, en los verdes de la casa (Javi: «elegante, pero que se note»).
   ========================================================================== */
.rin-clima { margin-top: 12px; padding: 14px 16px 15px 18px; border-radius: var(--r-campo); background: var(--eg-pale); border-left: 3px solid var(--eg-mid); }
.rin-clima__titulo { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--eg); }
.rin-clima__texto { margin-top: 4px; font-family: var(--serif); font-size: 19px; line-height: 1.35; color: var(--eg-deep); font-variant-numeric: lining-nums; }   /* sin esto, el 1 de Cormorant parece una I */
@media (min-width: 768px) {
  .rin-clima { padding: 16px 20px 17px 22px; }
  .rin-clima__texto { font-size: 20px; }
}