/**
Theme Name: ReCover Astra Child Theme
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: recover-astra-child-theme
Template: astra
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   DESIGN TOKENS
   Fuente unica de valores para toda la home. No anadir clamp()/px
   sueltos en una seccion nueva sin pasar antes por aqui.
   ============================================================ */
:root{
  /* -- Color: se sobrescriben las MISMAS variables que ya usa Astra
     en todo el sitio (nav, botones, fondos), no una paleta paralela. */
  --ast-global-color-0:#cfe8ce;
  --ast-global-color-1:#3f7e89;
  --ast-global-color-2:#12201e;
  --ast-global-color-3:#3f7e89;
  --ast-global-color-4:#e7f3e6;
  --ast-global-color-5:#fbfaf3;
  --ast-global-color-6:#cfe8ce;
  --ast-global-color-7:#12201e;
  --ast-global-color-8:#4b5a54;

  /* Alias semanticos (lo que usa el CSS propio de este repo) */
  --rc-bg: var(--ast-global-color-5);          /* fondo de pagina */
  --rc-text: var(--ast-global-color-2);        /* texto primario */
  --rc-text-muted: var(--ast-global-color-8);  /* texto secundario */
  --rc-accent: var(--ast-global-color-1);      /* color de marca / acento (fondos, bordes, elementos grandes) */
  --rc-accent-text: #2c6874;   /* misma familia pero mas oscuro: --rc-accent en texto pequeño (~12-16px) da 4.41:1 sobre --rc-bg, por debajo del 4.5:1 de WCAG AA. Este token si pasa (~5.3:1). Usar en texto, no en fondos/bordes. */
  --rc-accent-contrast: var(--ast-global-color-5); /* texto sobre el acento */
  --rc-surface-muted: var(--ast-global-color-4);   /* superficie suave (fondos de media) */
  --rc-border: var(--ast-global-color-6);      /* bordes / divisores */
  --rc-text-on-dark-muted: rgba(251,250,243,.55); /* texto apagado sobre fondo oscuro */

  /* -- Layout */
  --rc-container-max: 1280px;   /* ancho maximo de contenido */
  --rc-editorial-max: 640px;    /* ancho editorial estrecho (parrafos largos) */
  --rc-header-height: 80px;
  --rc-page-pad: 20px;          /* gutter horizontal: mobile por defecto */
  --rc-radius: 2px;             /* radio de borde unico en toda la home */

  /* -- Espaciado (escala) */
  --rc-space-xs: 8px;
  --rc-space-s: 16px;
  --rc-space-m: 24px;
  --rc-space-l: 40px;
  --rc-space-xl: 64px;
  --rc-section-space: clamp(72px, 9vw, 140px);      /* ritmo vertical estandar entre secciones */
  --rc-section-space-lg: clamp(96px, 12vw, 180px);   /* momentos editoriales con mas aire (Filosofia) */

  /* -- Tipografia */
  /* Para volver a la version anterior: cambiar el valor de --rc-font-display
     de nuevo a "Fraunces", Georgia, serif (el @import de arriba mantiene
     ambas fuentes cargadas para poder alternar sin tocar nada mas). */
  --rc-font-display: "Newsreader", Georgia, serif;
  --rc-font-body: "Inter", system-ui, sans-serif;
  --rc-display: clamp(48px, 7vw, 96px);
  --rc-h1: clamp(42px, 6vw, 80px);
  --rc-h2: clamp(32px, 4.4vw, 56px);
  --rc-h3: clamp(22px, 2.6vw, 28px);
  --rc-eyebrow-size: 12.5px;
  --rc-body-lg: clamp(18px, 1.6vw, 21px);
  --rc-body: clamp(16px, 1.2vw, 17px);
  --rc-small: 13px;

  /* -- Botones */
  --rc-btn-height: 52px;
  --rc-btn-pad-inline: 28px;

  /* -- Movimiento */
  --rc-transition: 0.2s ease;
}
@media (min-width:641px){ :root{ --rc-page-pad: 32px; } }   /* tablet: 32-40px */
@media (min-width:1025px){ :root{ --rc-page-pad: 56px; } }  /* desktop: 48-64px */

/* ============================================================
   SISTEMA DE LAYOUT GLOBAL
   Contenedor unico reutilizable. El objetivo es que ninguna seccion
   nueva vuelva a repetir max-width/padding-inline/margin-inline a
   mano: usa .rc-section (ritmo vertical) + .rc-container (ancho).
   ============================================================ */
.rc-section{
  padding-block: var(--rc-section-space);
}
.rc-section-lg{
  padding-block: var(--rc-section-space-lg);
}
.rc-container{
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding-inline: var(--rc-page-pad);
}

/* ============================================================
   CONTENEDORES Y WIDGETS -- antes los aportaba Elementor
   Sustituye lo unico que este theme usaba de frontend.min.css: el
   sistema de contenedor (.e-con/.e-con-inner, ahora .rc-sec/.rc-inner)
   y la base de heading, boton y video. Sin estas reglas, al desactivar
   Elementor las secciones pierden el layout en columna y el contenido
   deja de centrarse.
   ============================================================ */
.rc-sec{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.rc-sec > .rc-inner{
  width: 100%;
  margin-inline: auto;
}
.rc-sec .rc-w{ min-width: 0; }
.rc-sec .rc-w-video{ width: 100%; }
.rc-sec > .rc-inner > .rc-w > .rc-w-inner,
.rc-sec > .rc-w > .rc-w-inner{ height: 100%; }

.rc-heading{ margin: 0; padding: 0; line-height: 1; }

.rc-video-wrap{ position: relative; width: 100%; height: 100%; }
.rc-video-wrap video{ display: block; width: 100%; height: 100%; object-fit: cover; }

/* Utilidad de visibilidad: antes la daba .elementor-hidden-mobile.
   Se mantiene el breakpoint movil de Elementor (767px) para no mover
   el punto en el que el video del hero desaparece. */
@media (max-width: 767px){ .rc-hide-mobile{ display: none; } }

/* ============================================================
   BASE: tipografia global real (Astra)
   ============================================================ */
body.wp-theme-astra{
  font-family: var(--rc-font-body);
  color: var(--rc-text-muted);
  background: var(--rc-bg);
}
.rc-page-home .rc-heading,
.rc-page-home h1,
.rc-page-home h2{
  font-family: var(--rc-font-display);
  font-weight: 400;
  line-height: 1.05;
}

/* ============================================================
   BOTONES -- un primario, un secundario, ninguno inventado aparte.
   Base propia y completa: antes la daba .elementor-button, y por eso
   cada declaracion necesitaba !important. Ya no hay contra quien pelear.
   ============================================================ */
.rc-btn{
  background: var(--rc-text);
  color: var(--rc-accent-contrast);
  border: 0;
  border-radius: var(--rc-radius);
  font-family: var(--rc-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  min-height: var(--rc-btn-height);
  padding: 0 var(--rc-btn-pad-inline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--rc-transition), transform var(--rc-transition);
}
.rc-btn:focus,
.rc-btn:visited{ color: var(--rc-accent-contrast); }
.rc-btn:hover{
  background: var(--rc-accent);
  color: var(--rc-accent-contrast);
  transform: translateY(-1px);
}
.rc-btn-inner{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:5px; }
.rc-btn.rc-btn-secondary{
  background: transparent;
  color: var(--rc-text);
  border: 1px solid var(--rc-text);
}
.rc-btn.rc-btn-secondary:hover{
  border-color: var(--rc-accent);
  color: var(--rc-accent);
}

/* ============================================================
   EYEBROW / etiqueta de seccion -- reutilizada en toda la home
   ============================================================ */
.rc-hero-eyebrow{
  font-family: var(--rc-font-body);
  font-size: var(--rc-eyebrow-size);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rc-accent-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.rc-hero-eyebrow::before{
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

/* ============================================================
   HEADER -- header propio (ya no el markup verboso real de Astra):
   logo, 3 enlaces reales, CTA "Shop ReCover" y carrito. Fijo (sticky)
   y ligero al cargar -- sin borde, altura completa -- y se condensa
   sutilmente al hacer scroll (borde fino, algo menos de alto), en vez
   de una sombra pesada o un cambio brusco.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}
[id]{ scroll-margin-top: calc(var(--rc-header-height) + 16px); }

#masthead.rc-header{
  /* !important necesario: el ID #masthead tiene mas especificidad que
     la clase .rc-header, y el CSS real de Astra fija su propio
     position en ese mismo ID. */
  position: sticky !important;
  top: 0 !important;
  z-index: 50;
  background: var(--rc-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--rc-transition);
}
.rc-header.rc-scrolled{
  border-bottom-color: var(--rc-border);
}
.rc-header-inner{
  min-height: var(--rc-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-l);
  transition: min-height var(--rc-transition);
}
.rc-header.rc-scrolled .rc-header-inner{
  min-height: calc(var(--rc-header-height) - 16px);
}

.rc-logo{ display:flex; align-items:center; flex-shrink:0; }
.rc-logo img{ display:block; height:64px; width:auto; }

.rc-nav{ display:none; gap: var(--rc-space-l); }
.rc-nav-link{
  font-family: var(--rc-font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--rc-text);
  text-decoration: none;
  position: relative;
}
.rc-nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background: var(--rc-accent); transform:scaleX(0); transform-origin:left;
  transition: transform var(--rc-transition);
}
.rc-nav-link:hover::after{ transform:scaleX(1); }

.rc-header-actions{ display:flex; align-items:center; gap: var(--rc-space-m); }
.rc-header-cta{ min-height:40px; font-size:13.5px; padding:0 var(--rc-space-m); }
.rc-cart-link{ color:var(--rc-text); display:flex; align-items:center; }
.rc-cart-link svg{ display:block; }

.rc-menu-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; padding:0; border:none; background:none; cursor:pointer;
}
.rc-menu-toggle span{ display:block; height:1.5px; width:100%; background:var(--rc-text); transition: transform var(--rc-transition), opacity var(--rc-transition); }
body.rc-mobile-nav-open .rc-menu-toggle span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
body.rc-mobile-nav-open .rc-menu-toggle span:nth-child(2){ opacity:0; }
body.rc-mobile-nav-open .rc-menu-toggle span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.rc-mobile-nav{
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  background: var(--rc-bg);
  border-top: 1px solid transparent;
  transition: max-height var(--rc-transition);
}
body.rc-mobile-nav-open .rc-mobile-nav{
  max-height: 400px;
  border-top-color: var(--rc-border);
}
.rc-mobile-nav-link{
  font-family: var(--rc-font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--rc-text);
  text-decoration: none;
  padding: var(--rc-space-m) var(--rc-page-pad);
  border-bottom: 1px solid var(--rc-border);
}
.rc-mobile-cta{ margin: var(--rc-space-m) var(--rc-page-pad); justify-content:center; }

@media (min-width:900px){
  .rc-nav{ display:flex; }
  .rc-menu-toggle{ display:none; }
  .rc-mobile-nav{ display:none; }
}
@media (max-width:639px){
  .rc-header-cta{ display:none; }
}

/* ============================================================
   HERO -- Fase 4 del plan de refinamiento. rc-hero
   y sus hijos (markup real capturado de produccion). ~45% mensaje /
   55% producto, centrado verticalmente, producto dominante.
   ============================================================ */
.rc-hero{
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding-inline: var(--rc-page-pad);
  padding-block: calc(var(--rc-section-space) * 0.5) var(--rc-section-space);
}
.rc-hero-grid > .rc-inner{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "heading" "sub" "video" "cta";
  row-gap: var(--rc-space-m);
}
@media (min-width:900px){
  .rc-hero-grid > .rc-inner{
    grid-template-columns: .85fr 1.15fr;
    grid-template-areas:
      "heading video"
      "sub video"
      "cta video";
    column-gap: var(--rc-space-xl);
    align-items: center;
  }
}

.rc-hero-media{
  grid-area: video;
  position: relative;
  border-radius: var(--rc-radius);
  overflow: hidden;
  min-height: 320px;
  background: var(--rc-surface-muted);
}
@media (min-width:900px){ .rc-hero-media{ min-height:520px; } }
.rc-hero-media video{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* El video debe llenar la caja del hero. Antes Elementor calculaba
   alto y ancho por elemento (y heredaba un ancho fijo de ~1316px que
   recortaba el video, de cuando el widget iba a pantalla completa).
   Sin ese CSS hay que estirar la cadena widget > contenedor > wrapper
   a mano. Se hace con position:absolute + inset:0 en vez de con flex
   o height:100%: el alto de .rc-hero-media sale de min-height, que no
   cuenta como alto definido, asi que un height:100% encadenado no
   resuelve (colapsaba el video a los 150px por defecto del elemento).
   Con inset:0 cada capa llena a su ancestro posicionado y no depende
   de que nadie declare un alto. Mismo caso en .rc-how-hero-media,
   que es el propio widget de video en vez de un contenedor aparte. */
.rc-hero-media > .rc-w-video,
.rc-hero-media .rc-w-inner,
.rc-hero-media .rc-video-wrap,
.rc-how-hero-media .rc-w-inner,
.rc-how-hero-media .rc-video-wrap{
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

/* Ya no hace falta neutralizar el position:absolute ni el font-size
   que post-25.css (el CSS que Elementor compilaba para la home)
   imponia a este titular: ese archivo ya no se carga. */
.rc-hero-title{ grid-area: heading; }
.rc-hero-title .rc-heading{
  font-size: var(--rc-h1);
  line-height: 1.05;
  color: var(--rc-text);
  margin: 0;
}

.rc-area-sub{ grid-area: sub; }
.rc-area-cta{ grid-area: cta; }

.rc-hero-sub{
  font-size: var(--rc-body-lg);
  line-height: 1.6;
  color: var(--rc-text-muted);
  max-width: 42ch;
  margin: 0;
}
.rc-hero-sub strong{ color: var(--rc-text); font-weight: 600; }
.rc-hero-clarify{
  font-family: var(--rc-font-body);
  font-size: var(--rc-small);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rc-text-muted);
  margin: var(--rc-space-s) 0 0;
}

.rc-hero-cta-row{ display:flex; gap: var(--rc-space-s); flex-wrap: wrap; }

/* ============================================================
   HOW IT WORKS -- Fase 5 del plan de refinamiento: comprimida a
   aproximadamente una pantalla (aspect-ratio de la media pasa de
   4:5 a 1:1, margenes mas ajustados). Place / Pause / Remove.
   Seccion nueva (aun no existe en el Elementor real); sigue el
   patron real de contenedores/widgets para poder recrearla tal cual
   en el editor cuando se implemente ahi de verdad.
   ============================================================ */
.rc-how-it-works{
  display: block;
  width: 100%;
}
.rc-how-it-works > .rc-inner{
  display: flex;
  flex-direction: column;
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding-inline: var(--rc-page-pad);
  padding-block: calc(var(--rc-section-space) * 0.85);
}
.rc-hiw-eyebrow{ margin-bottom: var(--rc-space-m); }
.rc-hiw-title .rc-heading{
  max-width: 16ch;
  margin: 0 0 var(--rc-space-l);
  font-size: var(--rc-h2);
  color: var(--rc-text);
}

.rc-steps-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rc-space-l);
}
@media (min-width:860px){
  .rc-steps-row{ grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--rc-border); }
}

.rc-step{ display:flex; flex-direction:column; }
@media (min-width:860px){ .rc-step{ background: var(--rc-bg); } }

.rc-step-media .rc-w-inner{
  position: relative;
  background: var(--rc-surface-muted);
  overflow: hidden;
  border-radius: var(--rc-radius);
  aspect-ratio: 1/1;
}
@media (min-width:860px){ .rc-step-media .rc-w-inner{ border-radius:0; } }
.rc-step-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.rc-step-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.rc-step-index{
  position: absolute; top:16px; left:16px;
  font-family: var(--rc-font-display);
  font-size: 15px;
  color: var(--rc-bg);
  background: rgba(18,32,30,.78);
  padding: 6px 12px;
  border-radius: var(--rc-radius);
  letter-spacing: .02em;
}

.rc-step-label .rc-heading{
  font-size: var(--rc-h3);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--rc-text);
  margin: var(--rc-space-s) var(--rc-space-xs) var(--rc-space-xs);
}
@media (min-width:860px){ .rc-step-label .rc-heading{ margin: var(--rc-space-m) var(--rc-space-m) var(--rc-space-xs); } }

.rc-step-copy p{
  font-size: var(--rc-body);
  line-height: 1.5;
  color: var(--rc-text-muted);
  max-width: 32ch;
  margin: 0 var(--rc-space-xs);
}
@media (min-width:860px){ .rc-step-copy p{ margin: 0 var(--rc-space-m) var(--rc-space-m); } }

/* ============================================================
   PROBLEM / INSIGHT -- Fase 6 del plan de refinamiento: tratado como
   afirmacion editorial, no como otra seccion de tarjetas. Sin
   eyebrow (a diferencia del resto de secciones) y con mas aire que
   el ritmo estandar, a proposito: es la transicion de "entender el
   producto" a "esto me toca a mi", el momento mas cargado de toda la
   home junto a la Filosofia -- se le da el mismo tratamiento de
   espacio generoso (--rc-section-space-lg).
   ============================================================ */
.rc-problem{
  background: var(--rc-text);
  padding-block: var(--rc-section-space-lg);
}
.rc-problem .rc-inner{
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding-inline: var(--rc-page-pad);
}

.rc-problem-line-1 .rc-heading{
  color: var(--rc-text-on-dark-muted);
  font-size: var(--rc-h2);
  font-weight: 400;
  max-width: 18ch;
  margin: 0 0 var(--rc-space-xs);
}
.rc-problem-line-2{ margin-top: var(--rc-space-xs); }
@media (min-width:768px){ .rc-problem-line-2{ margin-left: 12%; } }
.rc-problem-line-2 .rc-heading{
  color: var(--rc-bg);
  font-style: italic;
  font-weight: 400;
  font-size: var(--rc-h1);
  max-width: 16ch;
  margin: 0;
}

.rc-problem,
.rc-problem > .rc-inner{ display:block; }
.rc-problem > .rc-inner{ display:flex; flex-direction:column; }

/* ============================================================
   MECANISMO DE FRICCION FISICA -- una sola linea de tiempo visual
   (Impulso -> ReCover -> Pausa -> Eleccion consciente), no tarjetas.
   ============================================================ */
.rc-mechanism,
.rc-mechanism > .rc-inner{ display:block; }
.rc-mechanism > .rc-inner{
  display: flex;
  flex-direction: column;
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding-inline: var(--rc-page-pad);
  padding-block: var(--rc-section-space);
}

.rc-mech-title .rc-heading{
  color: var(--rc-text);
  font-size: var(--rc-h2);
  max-width: 20ch;
  margin: 0 0 var(--rc-space-xl);
}

.rc-flow{
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin-bottom: var(--rc-space-l);
}
.rc-flow-node{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rc-space-s);
  min-width: 110px;
}
.rc-flow-icon{
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rc-flow-dot{
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--rc-border);
  border: 2px solid var(--rc-accent);
}
/* Nodo "ReCover": foto real del producto en vez de un punto abstracto
   -- es literalmente la interrupcion fisica que explica la seccion,
   no otro paso mas de un stepper generico de SaaS. Circulo mas grande
   que los puntos de los demas nodos para que la foto del producto se
   reconozca bien dentro de el. */
.rc-flow-photo{
  width: 72px; height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--rc-accent);
  box-shadow: 0 0 0 6px var(--rc-surface-muted);
}
.rc-flow-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.rc-flow-label{
  font-family: var(--rc-font-body);
  font-size: var(--rc-eyebrow-size);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rc-text-muted);
  white-space: nowrap;
}
.rc-flow-node-product .rc-flow-label{ color: var(--rc-text); font-weight: 700; }
.rc-flow-line{
  flex: 1 1 auto;
  height: 1px;
  min-width: 24px;
  background: var(--rc-border);
  margin-top: 35px; /* centrado respecto al icono de 72px de todos los nodos */
}
@media (max-width:700px){
  .rc-flow{ flex-direction: column; align-items: flex-start; }
  .rc-flow-node{ flex-direction: row; align-items: center; min-width: 0; gap: 14px; }
  .rc-flow-line{ width: 1px; height: 28px; min-width: 0; margin: 2px 0 2px 35px; }
  /* En la fila vertical movil los labels ya no comparten una linea de
     tiempo horizontal donde el nowrap evita que salten de alto: a
     partir de aqui pueden envolver. Sin esto, "Conscious choice" no
     encoge ni envuelve y empuja la pagina a scroll horizontal en
     viewports muy estrechos (zoom alto, texto de accesibilidad grande). */
  .rc-flow-label{ white-space: normal; }
}

.rc-mech-sub p{
  font-size: var(--rc-body-lg);
  color: var(--rc-text-muted);
  max-width: 48ch;
  margin: 0;
}
.rc-mech-sub-secondary{
  font-size: var(--rc-body) !important;
  opacity: .7;
  margin-top: var(--rc-space-s) !important;
}

/* ============================================================
   REVEAL EN SCROLL -- sistema generico reutilizado por Problem/Insight
   y por la seccion de diferenciacion. Cada elemento .rc-reveal empieza
   invisible/desplazado y pasa a .rc-visible cuando entra en viewport
   (IntersectionObserver, una sola vez, sin repetir al subir/bajar).
   Con prefers-reduced-motion se muestra todo de inmediato sin mover
   nada.
   ============================================================ */
.rc-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.rc-reveal.rc-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .rc-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   ANIMACION DEL MECANISMO -- Impulso -> ReCover -> Pausa -> Eleccion.
   Estado inicial: solo "Impulse" activo, el resto atenuado y las
   lineas sin dibujar. Un pequeno script activa cada tramo en
   secuencia cuando la seccion entra en viewport, con una pausa
   deliberada de ~600ms justo al llegar a "ReCover" -- la propia
   animacion demuestra la idea del producto (interrupcion antes de
   continuar). Con prefers-reduced-motion se muestra todo activo de
   inmediato.
   ============================================================ */
.rc-flow-line{
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}
.rc-flow-line.rc-flow-active{ transform: scaleX(1); }
.rc-flow-node{ opacity: .4; transition: opacity .4s ease; }
.rc-flow-node.rc-flow-active{ opacity: 1; }
@media (max-width:700px){
  .rc-flow-line{ transform: scaleY(0); transform-origin: top; }
  .rc-flow-line.rc-flow-active{ transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce){
  .rc-flow-line{ transform:none !important; transition:none !important; }
  .rc-flow-node{ opacity:1 !important; transition:none !important; }
}

/* ============================================================
   DIFERENCIACION -- "No app. No blocker. No notification." Tipografia
   grande, muy poco copy, reveal progresivo linea a linea (.rc-reveal).
   ============================================================ */
.rc-differentiation,
.rc-differentiation > .rc-inner{ display:block; }
.rc-differentiation > .rc-inner{
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding-inline: var(--rc-page-pad);
  padding-block: var(--rc-section-space-lg);
}
.rc-diff-line{
  font-family: var(--rc-font-display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 64px);
  color: var(--rc-text-muted);
  margin: 0 0 var(--rc-space-xs);
  line-height: 1.15;
}
.rc-diff-line:nth-of-type(1){ transition-delay: 0s; }
.rc-diff-line:nth-of-type(2){ transition-delay: .1s; }
.rc-diff-line:nth-of-type(3){ transition-delay: .2s; }
.rc-diff-line:nth-of-type(4){ transition-delay: .3s; }
.rc-diff-final{
  font-family: var(--rc-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 64px);
  color: var(--rc-accent-text);
  margin: var(--rc-space-l) 0 0;
  line-height: 1.15;
  transition-delay: .4s;
}

/* ============================================================
   BENEFICIO EMOCIONAL -- Fase 8 del plan de refinamiento. "Presence,
   on purpose" pasa a ser uno de los momentos centrales de marca: el
   propio plan pide "Presence -> full-bleed lifestyle" como parte del
   ritmo visual de la home (seccion 17), asi que el grid de fotos
   rompe el contenedor y ocupa el ancho completo del viewport; el
   titulo se queda en el ancho de contenido estandar.
   ============================================================ */
.rc-emotion,
.rc-emotion > .rc-inner{ display:block; }
.rc-emotion > .rc-inner{
  display: flex;
  flex-direction: column;
  padding-block: var(--rc-section-space);
}

.rc-emo-eyebrow,
.rc-emo-title{
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding-inline: var(--rc-page-pad);
  width: 100%;
}
.rc-emo-title .rc-heading{
  color: var(--rc-text);
  font-size: var(--rc-h2);
  max-width: 16ch;
  margin: 0 0 var(--rc-space-xl);
}

.rc-emo-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
@media (min-width:860px){
  .rc-emo-grid{ grid-template-columns: 1.4fr .9fr; gap: 2px; align-items: stretch; }
  .rc-emo-img-small{ align-self: end; }
}

.rc-emo-img-big .rc-w-inner,
.rc-emo-img-small .rc-w-inner{
  overflow: hidden;
  min-height: 420px;
}
@media (min-width:860px){
  .rc-emo-img-big .rc-w-inner,
  .rc-emo-img-small .rc-w-inner{ min-height: 600px; }
}
.rc-emo-img-big img,
.rc-emo-img-small img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   CTA INTERMEDIO -- despues de mecanismo + beneficio emocional.
   Simple, mucho blanco, una sola accion; no una promo/banner.
   ============================================================ */
.rc-mid-cta,
.rc-mid-cta > .rc-inner{ display:block; }
.rc-mid-cta > .rc-inner{
  max-width: var(--rc-editorial-max);
  margin-inline: auto;
  padding-inline: var(--rc-page-pad);
  padding-block: var(--rc-section-space);
  text-align: center;
}
.rc-mid-cta-title{
  font-family: var(--rc-font-display);
  font-weight: 400;
  font-size: var(--rc-h2);
  color: var(--rc-text);
  margin: 0 0 var(--rc-space-l);
}
.rc-mid-cta .rc-btn{ display:inline-flex; }

/* ============================================================
   USAGE MOMENTS -- bloques grandes alternados dentro de la columna de
   contenido estandar (container-max, centrada), no tarjetas uniformes
   de Elementor ni fotos a sangre completa.
   ============================================================ */
.rc-moments,
.rc-moments > .rc-inner{ display:block; }
.rc-moments > .rc-inner{
  display: flex;
  flex-direction: column;
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding-inline: var(--rc-page-pad);
  width: 100%;
}

.rc-mom-eyebrow{ padding-top: var(--rc-section-space); }
.rc-mom-title .rc-heading{
  color: var(--rc-text);
  font-size: var(--rc-h2);
  margin: 0 0 var(--rc-space-xs);
}

.rc-moment-row{
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rc-border);
}
.rc-moments > .rc-inner > .rc-moment-row:last-child{
  border-bottom: 1px solid var(--rc-border);
}
@media (min-width:860px){
  .rc-moment-row{ flex-direction: row; align-items: stretch; min-height: 420px; }
  .rc-moment-row-rev{ flex-direction: row-reverse; }
}

.rc-moment-media{ flex: 1 1 55%; }
.rc-moment-media .rc-w-inner{
  height: 100%;
  min-height: 280px;
  overflow: hidden;
}
.rc-moment-media img{
  width:100%; height:100%;
  object-fit: cover;
  display: block;
  min-height: 280px;
}
.rc-moment-placeholder .rc-w-inner{
  background: var(--rc-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-placeholder-flag{
  font-family: var(--rc-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rc-accent);
  border: 1px dashed var(--rc-accent);
  padding: var(--rc-space-xs) 14px;
  border-radius: var(--rc-radius);
}

.rc-moment-copy{
  flex: 1 1 45%;
  display: flex;
  align-items: center;
  padding: var(--rc-space-l) var(--rc-page-pad);
}
@media (min-width:860px){
  .rc-moment-copy{ padding: 0 clamp(32px,5vw,96px); }
}
.rc-moment-copy .rc-w-inner{
  display: flex;
  align-items: baseline;
  gap: var(--rc-space-m);
}
.rc-moment-index{
  font-family: var(--rc-font-display);
  font-size: 16px;
  color: var(--rc-accent-text);
}
.rc-moment-copy .rc-heading{
  font-size: var(--rc-h1);
  color: var(--rc-text);
  margin: 0;
}

/* ============================================================
   PRODUCT DETAILS -- Fase 10 del plan de refinamiento. Credibilidad
   fisica del producto: material, mecanismo de ajuste, packaging.
   Fotos reales de producto (no de estilo de vida); los pies de foto
   describen solo lo que se ve, sin inventar materiales ni medidas.
   ============================================================ */
.rc-product,
.rc-product > .rc-inner{ display:block; }
.rc-product > .rc-inner{
  display: flex;
  flex-direction: column;
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding-inline: var(--rc-page-pad);
  padding-block: var(--rc-section-space);
}
.rc-product-title .rc-heading{
  color: var(--rc-text);
  font-size: var(--rc-h2);
  max-width: 18ch;
  margin: 0 0 var(--rc-space-xl);
}

.rc-product-showcase{
  position: relative;
  background: var(--rc-surface-muted);
  overflow: hidden;
  /* Ratio real de recover-flatlay-pouch-clips.jpg (2000x1578): con
     aspect-ratio en vez de un min-height fijo, object-fit:cover no
     tiene que recortar nada -- la bolsa, la tapa y los clips quedan
     siempre visibles tal cual se encuadraron en la foto. */
  aspect-ratio: 2000 / 1578;
  min-height: 320px;
}
.rc-product-hero-img{
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  display: block;
}

.rc-hotspot{
  position: absolute;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-hotspot-dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rc-bg);
  border: 2px solid var(--rc-text);
  box-shadow: 0 0 0 6px rgba(251,250,243,.35);
  transition: transform var(--rc-transition), background var(--rc-transition);
}
.rc-hotspot:hover .rc-hotspot-dot,
.rc-hotspot[aria-expanded="true"] .rc-hotspot-dot{
  background: var(--rc-accent);
  border-color: var(--rc-accent);
  transform: scale(1.15);
}
.rc-hotspot-tip{
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 220px;
  background: var(--rc-text);
  color: var(--rc-bg);
  font-family: var(--rc-font-body);
  font-size: 13px;
  line-height: 1.5;
  padding: var(--rc-space-s) var(--rc-space-m);
  border-radius: var(--rc-radius);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--rc-transition), transform var(--rc-transition);
}
.rc-hotspot:hover .rc-hotspot-tip,
.rc-hotspot[aria-expanded="true"] .rc-hotspot-tip{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
@media (max-width:640px){
  /* En movil no hay hover: el tooltip se apoya en el borde del hotspot
     en vez de intentar centrarse, para no salirse de la pantalla. */
  .rc-hotspot-tip{ left: 0; transform: translateX(0) translateY(4px); }
  .rc-hotspot:hover .rc-hotspot-tip,
  .rc-hotspot[aria-expanded="true"] .rc-hotspot-tip{ transform: translateX(0) translateY(0); }
}

/* ============================================================
   TRUST -- Fase 11 del plan de refinamiento. Sin resenas ni cifras
   inventadas: se apoya solo en informacion real y verificable
   (checkout seguro, FAQ real, Our Story real).
   ============================================================ */
.rc-trust,
.rc-trust > .rc-inner{ display:block; }
.rc-trust > .rc-inner{
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding-inline: var(--rc-page-pad);
  padding-block: var(--rc-space-xl);
  border-top: 1px solid var(--rc-border);
  border-bottom: 1px solid var(--rc-border);
}
.rc-trust-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rc-space-l);
}
@media (min-width:700px){
  .rc-trust-row{ grid-template-columns: repeat(3,1fr); gap: var(--rc-space-xl); }
}
.rc-trust-item-title{
  font-family: var(--rc-font-body);
  font-size: var(--rc-small);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rc-text);
  margin: 0 0 var(--rc-space-xs);
}
.rc-trust-item-copy{
  font-size: var(--rc-body);
  color: var(--rc-text-muted);
  margin: 0;
}
.rc-trust-link{
  color: var(--rc-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rc-trust-link:hover{ color: var(--rc-text); }

/* ============================================================
   FILOSOFIA DE MARCA -- manifiesto tipografico. El momento mas
   minimo de toda la home: mas espacio (--rc-section-space-lg), sin
   fondo oscuro (para no repetir el recurso de Problem/Insight).
   ============================================================ */
.rc-philosophy,
.rc-philosophy > .rc-inner{ display:block; }
.rc-philosophy > .rc-inner{
  display: flex;
  flex-direction: column;
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding-inline: var(--rc-page-pad);
  padding-block: var(--rc-section-space-lg);
}

.rc-phi-eyebrow{ margin-bottom: var(--rc-space-l); }

.rc-phi-line-1 .rc-heading{
  font-weight: 400;
  color: var(--rc-text);
  font-size: var(--rc-display);
  line-height: 1.02;
  margin: 0;
}
.rc-phi-line-2{ margin-top: var(--rc-space-xs); }
.rc-phi-line-2 .rc-heading{
  font-weight: 400;
  font-style: italic;
  color: var(--rc-accent);
  font-size: var(--rc-display);
  line-height: 1.02;
  margin: 0;
}

/* ============================================================
   FINAL CTA -- Fase 12b del plan de refinamiento. Cierre decisivo:
   imagen de producto fuerte + una frase corta + CTA. Sin precio (no
   confirmado) y sin repetir la explicacion del producto.
   ============================================================ */
.rc-final-cta,
.rc-final-cta > .rc-inner{ display:block; }
.rc-final-cta > .rc-inner{
  display: flex;
  flex-direction: column;
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding-inline: var(--rc-page-pad);
  padding-block: var(--rc-section-space);
  background: var(--rc-surface-muted);
}
@media (min-width:860px){
  .rc-final-cta > .rc-inner{
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    column-gap: var(--rc-space-xl);
  }
}
.rc-final-media .rc-w-inner{
  max-width: 360px;
  margin-inline: auto;
}
@media (min-width:860px){ .rc-final-media .rc-w-inner{ max-width:100%; } }
.rc-final-media img{ width:100%; height:auto; display:block; }

.rc-final-copy{ text-align:center; margin-top: var(--rc-space-l); }
@media (min-width:860px){ .rc-final-copy{ text-align:left; margin-top:0; } }
.rc-final-title .rc-heading{
  color: var(--rc-text);
  font-size: var(--rc-h1);
  margin: 0 0 var(--rc-space-l);
}
.rc-final-reassurance{
  font-size: var(--rc-small);
  color: var(--rc-text-muted);
  margin: var(--rc-space-m) 0 0;
}

/* ============================================================
   FOOTER -- contenido secundario que el plan pide sacar del header
   (Sizes, Easy Set-Up, Blog) vive aqui.
   ============================================================ */
.rc-footer{
  background: var(--rc-text);
  color: var(--rc-text-on-dark-muted);
}
.rc-footer-inner{
  padding-block: var(--rc-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-l);
}
@media (min-width:700px){
  .rc-footer-inner{ flex-direction:row; justify-content:space-between; align-items:flex-start; }
}
.rc-footer-logo{ height:46px; width:auto; filter: brightness(0) invert(1); opacity:.9; }
.rc-footer-tagline{
  font-family: var(--rc-font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--rc-bg);
  margin: var(--rc-space-s) 0 0;
}
.rc-footer-links{
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-m) var(--rc-space-l);
}
.rc-footer-links a{
  font-family: var(--rc-font-body);
  font-size: 14px;
  color: var(--rc-text-on-dark-muted);
  text-decoration: none;
}
.rc-footer-links a:hover{ color: var(--rc-bg); }
.rc-footer-bottom{
  padding-block: var(--rc-space-m);
  border-top: 1px solid rgba(251,250,243,.15);
}
.rc-footer-bottom p{ font-size:12.5px; margin:0; }

/* ============================================================
   ACCESIBILIDAD -- Fase 14. Estado de foco visible y consistente
   para navegacion por teclado (enlaces, botones, controles).
   ============================================================ */
a:focus-visible,
button:focus-visible{
  outline: 2px solid var(--rc-accent);
  outline-offset: 2px;
}

/* ============================================================
   PAGINA: HOW RECOVER WORKS
   Reutiliza tokens y componentes de la home (.rc-flow, .rc-steps-row,
   .rc-final-cta, .rc-reveal, .rc-btn) tal cual, sin redefinirlos. Aqui
   solo lo que esta pagina necesita y no existe ya: tipografia de
   titulos (equivalente a .rc-page-home pero sin depender del post-id
   de la home), hero propio, comparacion friccion, no-lock, bucle de
   habito, fit y ReCover Bag.

   Se deja fuera a proposito lo que ya cuenta la home sin anadir nada
   nuevo aqui: no hay seccion de "moments"/"cuando usarlo" (la home ya
   la tiene, con las mismas fotos) ni hotspots de producto (los mismos
   hechos se explican como lista de texto en "fit").
   ============================================================ */
.rc-how-page .rc-heading,
.rc-how-page h1,
.rc-how-page h2{
  font-family: var(--rc-font-display);
  font-weight: 400;
  line-height: 1.05;
}

/* -- Hero ---------------------------------------------------- */
.rc-how-hero > .rc-container{
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-l);
  padding-block: calc(var(--rc-section-space) * 0.6) var(--rc-section-space);
}
.rc-how-hero-heading{
  font-size: var(--rc-h1);
  color: var(--rc-text);
  max-width: 14ch;
  margin: var(--rc-space-m) 0 0;
}
.rc-how-hero-sub{
  font-size: var(--rc-body-lg);
  color: var(--rc-text-muted);
  max-width: 42ch;
  margin: var(--rc-space-s) 0 0;
}
.rc-how-scroll-cue{
  display: inline-flex;
  margin-top: var(--rc-space-m);
  font-family: var(--rc-font-body);
  font-size: var(--rc-small);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rc-text-muted);
  text-decoration: none;
}
.rc-how-scroll-cue:hover{ color: var(--rc-accent-text); }
.rc-how-hero-media{
  position: relative;
  border-radius: var(--rc-radius);
  overflow: hidden;
  min-height: 320px;
  background: var(--rc-surface-muted);
}
@media (min-width:900px){ .rc-how-hero-media{ min-height: 640px; } }
.rc-how-hero-media video{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* -- Mecanismo: hereda .rc-flow/.rc-flow-node/.rc-mech-sub tal cual;
   solo se anade la palabra grande "PAUSE" como refuerzo tipografico
   decorativo (aria-hidden, el contenido real vive en .rc-flow-label).
   El contenedor de ancho (max-width/padding-inline) no lo hereda de
   .rc-mechanism -- esta seccion usa una clase distinta (rc-how-mechanism)
   y necesita su propia regla, igual que .rc-mechanism > .rc-inner en
   la home. */
.rc-how-mechanism,
.rc-how-mechanism > .rc-inner{ display:block; }
.rc-how-mechanism > .rc-inner{
  display: flex;
  flex-direction: column;
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding-inline: var(--rc-page-pad);
  padding-block: var(--rc-section-space);
}
.rc-how-pause-word{
  font-family: var(--rc-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--rc-display);
  line-height: 1.05;
  color: var(--rc-accent-text);
  text-align: center;
  letter-spacing: .02em;
  margin: var(--rc-space-xl) 0 var(--rc-space-l);
}

/* -- Tres pasos: hereda .rc-steps-row/.rc-step*; a escala mas
   editorial que el resumen de la home (4:5 en vez de 1:1). */
.rc-how-steps .rc-step-media .rc-w-inner{ aspect-ratio: 4/5; }

/* -- Por que funciona la friccion fisica: comparacion tipografica,
   sin iconos ni cajas conectadas por flechas. */
.rc-how-friction > .rc-container{ padding-block: var(--rc-section-space); }
.rc-how-friction-title{
  color: var(--rc-text);
  font-size: var(--rc-h2);
  max-width: 20ch;
  margin: 0 0 var(--rc-space-s);
}
.rc-how-friction-intro{
  font-size: var(--rc-body-lg);
  color: var(--rc-text-muted);
  max-width: 52ch;
  margin: 0 0 var(--rc-space-xl);
}
.rc-friction-compare{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rc-space-xl);
}
@media (min-width:768px){
  .rc-friction-compare{ grid-template-columns: 1fr 1fr; gap: var(--rc-space-xl); }
}
.rc-friction-col-title{
  font-family: var(--rc-font-body);
  font-size: var(--rc-small);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rc-text-muted);
  margin: 0 0 var(--rc-space-m);
}
.rc-friction-with .rc-friction-col-title{ color: var(--rc-accent-text); }
.rc-friction-steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-s);
}
.rc-friction-steps li{
  font-family: var(--rc-font-display);
  font-size: var(--rc-h3);
  color: var(--rc-text-muted);
  padding-bottom: var(--rc-space-s);
  border-bottom: 1px solid var(--rc-border);
}
.rc-friction-with li{ color: var(--rc-text); }
.rc-friction-with li:last-child{ color: var(--rc-accent-text); font-style: italic; }

/* -- No lock / no restriction: bloque calmado, media + copy corta. */
.rc-how-nolock > .rc-container{
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-l);
  padding-block: var(--rc-section-space);
  background: var(--rc-surface-muted);
}
@media (min-width:860px){
  .rc-how-nolock > .rc-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: var(--rc-space-xl);
  }
}
.rc-how-nolock-media{
  overflow: hidden;
  min-height: 360px;
}
.rc-how-nolock-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.rc-how-nolock-title{
  font-family: var(--rc-font-display);
  font-weight: 400;
  font-size: var(--rc-h2);
  color: var(--rc-text);
  margin: 0 0 var(--rc-space-m);
}
.rc-how-nolock-copy{
  font-size: var(--rc-body);
  color: var(--rc-text-muted);
  margin: 0;
}

/* -- Por defecto (bucle): mensaje en texto, sin repetir el diagrama
   .rc-flow que ya aparece en "The mechanism" mas arriba en la misma
   pagina. */
.rc-how-loop > .rc-container{ padding-block: var(--rc-section-space); }
.rc-how-loop-title{
  color: var(--rc-text);
  font-size: var(--rc-h2);
  max-width: 18ch;
  margin: 0 0 var(--rc-space-m);
}
.rc-how-loop-copy{
  font-size: var(--rc-body-lg);
  color: var(--rc-text-muted);
  max-width: 42ch;
  margin: 0;
}

/* -- Encaje en el telefono: reutiliza .rc-product-showcase; lista de
   hechos confirmados en vez de hotspots (misma info, mas legible sin
   necesidad de otro sistema interactivo en la misma pagina). */
.rc-how-fit > .rc-container{ padding-block: var(--rc-section-space); }
.rc-how-fit-title{
  color: var(--rc-text);
  font-size: var(--rc-h2);
  max-width: 18ch;
  margin: 0 0 var(--rc-space-xl);
}
.rc-how-fit-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rc-space-l);
}
@media (min-width:860px){
  .rc-how-fit-grid{ grid-template-columns: 1.1fr .9fr; column-gap: var(--rc-space-xl); align-items: center; }
}
.rc-how-fit-media{ overflow: hidden; min-height: 360px; background: var(--rc-surface-muted); }
.rc-how-fit-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.rc-how-fit-facts{ list-style: none; margin: 0 0 var(--rc-space-l); padding: 0; }
.rc-how-fit-facts li{
  font-size: var(--rc-body);
  color: var(--rc-text-muted);
  padding: var(--rc-space-s) 0;
  border-top: 1px solid var(--rc-border);
}
.rc-how-fit-facts li:last-child{ border-bottom: 1px solid var(--rc-border); }

/* -- ReCover Bag: secundario a proposito, mas pequeno y contenido. */
.rc-how-bag > .rc-container{
  max-width: var(--rc-editorial-max);
  padding-block: var(--rc-section-space);
  text-align: center;
}
.rc-how-bag-title{
  color: var(--rc-text);
  font-size: var(--rc-h3);
  margin: var(--rc-space-m) 0 var(--rc-space-m);
}
.rc-how-bag-copy{
  font-size: var(--rc-body);
  color: var(--rc-text-muted);
  margin: 0 0 var(--rc-space-l);
}

/* -- Placeholder de media pendiente (reutiliza .rc-placeholder-flag). */
.rc-how-placeholder-block{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  background: var(--rc-surface-muted);
  border-radius: var(--rc-radius);
}

/* ============================================================
   PAGINA: EASY SET-UP (ASSEMBLY)
   Reutiliza tal cual los componentes ya existentes (.rc-how-hero,
   .rc-how-fit*, .rc-how-it-works/.rc-how-steps/.rc-steps-row/.rc-step*,
   .rc-final-cta, .rc-trust-link, .rc-placeholder-flag). Aqui solo lo que
   esta pagina necesita y no existe todavia: tipografia de titulos
   (equivalente a .rc-how-page), la etiqueta "(optional)" del Paso 3 y el
   acordeon de cuidado/troubleshooting.
   ============================================================ */
.rc-easy-page .rc-heading,
.rc-easy-page h1,
.rc-easy-page h2{
  font-family: var(--rc-font-display);
  font-weight: 400;
  line-height: 1.05;
}

/* -- Etiqueta "(optional)" del Paso 3 (Anti-Slip O-Rings): mismo
   tratamiento tipografico que el eyebrow, pero inline junto al titulo. */
.rc-step-optional{
  font-family: var(--rc-font-body);
  font-size: var(--rc-small);
  font-weight: 600;
  color: var(--rc-text-muted);
}

/* -- Care & troubleshooting: acordeon propio, construido combinando
   tipografia/espaciado/color ya existentes (nada de estilo de libreria).
   Apertura por grid-template-rows 0fr -> 1fr: anima la altura sin medirla
   en JS y colapsa a 0 de forma limpia con overflow:hidden en el interior. */
.rc-setup-faq > .rc-container{
  max-width: var(--rc-editorial-max);
  padding-block: var(--rc-section-space);
}
.rc-setup-faq-title{
  font-family: var(--rc-font-display);
  font-weight: 400;
  font-size: var(--rc-h2);
  color: var(--rc-text);
  margin: var(--rc-space-m) 0 var(--rc-space-xl);
}
.rc-faq-list{
  display: flex;
  flex-direction: column;
}
.rc-faq-item{
  border-top: 1px solid var(--rc-border);
}
.rc-faq-item:last-child{
  border-bottom: 1px solid var(--rc-border);
}
.rc-faq-question{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-m);
  width: 100%;
  background: none;
  border: 0;
  margin: 0;
  padding: var(--rc-space-m) 0;
  font-family: var(--rc-font-body);
  font-size: var(--rc-body-lg);
  color: var(--rc-text);
  text-align: left;
  cursor: pointer;
}
.rc-faq-icon{
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.rc-faq-icon::before,
.rc-faq-icon::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--rc-text);
  transform: translate(-50%,-50%);
  transition: transform var(--rc-transition);
}
.rc-faq-icon::before{ width: 14px; height: 1.5px; }
.rc-faq-icon::after{ width: 1.5px; height: 14px; }
.rc-faq-item.rc-faq-open .rc-faq-icon::after{ transform: translate(-50%,-50%) rotate(90deg) scaleY(0); }
.rc-faq-answer-wrap{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--rc-transition);
}
.rc-faq-item.rc-faq-open .rc-faq-answer-wrap{ grid-template-rows: 1fr; }
.rc-faq-answer{ overflow: hidden; }
.rc-faq-answer p{
  font-size: var(--rc-body);
  color: var(--rc-text-muted);
  margin: 0 0 var(--rc-space-m);
  max-width: 52ch;
}

/* -- Cierre: dos salidas secundarias bajo el CTA principal, mismo
   tratamiento de enlace que .rc-trust-link, apiladas en mobile y en
   fila en desktop. Se reutiliza tambien en la pagina FAQ. */
.rc-easy-cta-links{
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-xs);
  margin-top: var(--rc-space-s);
}
@media (min-width:640px){
  .rc-easy-cta-links{ flex-direction: row; gap: var(--rc-space-l); }
}

/* ============================================================
   PAGINA: FAQ
   Reutiliza integramente los componentes de Easy Set-Up: .rc-how-hero
   (sin video: esta pagina no tiene uno propio ni en produccion),
   .rc-setup-faq/.rc-faq-* (dos categorias en la misma pagina -- el JS
   ya itera todos los .rc-faq-item sin cambios), .rc-how-fit-facts
   (lista de tallas dentro de una respuesta), .rc-final-cta,
   .rc-trust-link, .rc-easy-cta-links. Lo unico que no existia: la
   tipografia de titulos de esta pagina.
   ============================================================ */
.rc-faq-page .rc-heading,
.rc-faq-page h1,
.rc-faq-page h2{
  font-family: var(--rc-font-display);
  font-weight: 400;
  line-height: 1.05;
}