/* =========================================
   Catalizadora Digital — styles.css
   ========================================= */

/* Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================
   Tipografía local (las fuentes viven en /fonts, sin depender de Google)
========================= */

/* Karla — cuerpo y navegación. Variable: cubre de 200 a 800 en un solo archivo. */
@font-face {
    font-family: 'Karla';
    src: url('fonts/Karla-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* Linux Libertine — títulos y frases-statement (serif con aire de carta) */
@font-face {
    font-family: 'Linux Libertine';
    src: url('fonts/LinLibertine_DR.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Linux Libertine';
    src: url('fonts/LinLibertine_RI.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
/* Bold real (cubre el 700 y el 800 de los títulos, sin sintetizar) */
@font-face {
    font-family: 'Linux Libertine';
    src: url('fonts/LinLibertine_RB.otf') format('opentype');
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Linux Libertine';
    src: url('fonts/LinLibertine_RBI.otf') format('opentype');
    font-weight: 700 900;
    font-style: italic;
    font-display: swap;
}

/* Cedarville Cursive — solo para guiños a mano (marca y cierre del footer) */
@font-face {
    font-family: 'Cedarville Cursive';
    src: url('fonts/CedarvilleCursive-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =========================
   Tokens
========================= */
:root {
    /* Paleta */
    --primary: #AD6A4B;      /* terracota: combina con sage, madera y papel */
    --secondary: #B5734F;    /* terracota claro (acentos secundarios) */
    --background: #121227;   /* fondo oscuro */
    --card: #111126;         /* superficie de las cards */
    --text: #2E2E2E;          /* gris oscuro: texto principal sobre texturas claras (papel) */
    --text-muted: #595959;    /* gris medio: texto secundario sobre papel */

    /* Luz cálida tipo lámpara de velador (la "noche íntima" del caracol) */
    --glow-warm: 255, 198, 142;

    /* Tripletas RGB para rgba() */
    --primary-rgb: 173, 106, 75;
    --secondary-rgb: 181, 115, 79;
    --background-rgb: 18, 18, 39;

    /* Tipografía */
    --font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Linux Libertine', Georgia, 'Times New Roman', serif;
    --font-accent: 'Cedarville Cursive', 'Segoe Script', cursive;

    /* Transición (estados que sí cambian: header al scroll, menú móvil, link activo) */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================
   Aplicación de fuentes
   Karla ya va por defecto en el body. Aquí solo los títulos (serif)
   y los dos guiños a mano (cursiva).
========================= */

/* Títulos y frases-statement → Linux Libertine */
.hero-title,
.section-title,
.category-title,
.validacion-statement h3,
.reencuadre-column h3,
.reencuadre-statement p,
.diferenciador-column h3,
.paso-item h3,
.cta-option h3,
.servicio-card h3,
.contact-form-title,
.redes-sociales h3,
.validacion-eco-statement {
    font-family: var(--font-display);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background: #d9d8d2;
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* Fondo estrellado global */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 130px 80px, #fff, transparent),
        radial-gradient(1px 1px at 160px 30px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 200px 60px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 240px 20px, #fff, transparent),
        radial-gradient(1px 1px at 280px 90px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 320px 50px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 360px 10px, #fff, transparent);
    background-repeat: repeat;
    background-size: 400px 100px;
    animation: sparkle 4s linear infinite;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 60px 120px, #fff, transparent),
        radial-gradient(2px 2px at 150px 50px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 250px 100px, #fff, transparent),
        radial-gradient(2px 2px at 350px 20px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 450px 80px, #fff, transparent);
    background-repeat: repeat;
    background-size: 500px 120px;
    animation: sparkle 6s linear infinite reverse;
}

@keyframes sparkle {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.12; }
}

/* Contenido por encima del fondo estrellado */
header,
section,
footer {
    position: relative;
    z-index: 1;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 1; /* el contenido siempre por encima de las ilustraciones decorativas */
}

/* Accesibilidad: foco visible por teclado */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* =========================
   Header / Nav
========================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    transition: var(--transition);
}

.header.scrolled {
    background: linear-gradient(rgba(52, 62, 57, 0.82), rgba(52, 62, 57, 0.82)), url("bg-hoja.jpg") center / cover no-repeat;
    backdrop-filter: blur(20px);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link.active {
    color: var(--primary);
}

.nav-cta {
    background: var(--primary);
    color: #fff;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: var(--text);
    border-radius: 2px;
}

/* =========================
   Hero
========================= */
.hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgba(46, 56, 50, 0.52), rgba(40, 50, 45, 0.64)), url("bg-hoja.jpg") center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 120px;
    padding-bottom: 120px;
}

.stars-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.stars-small {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 130px 80px, #fff, transparent),
        radial-gradient(1px 1px at 160px 30px, rgba(255, 255, 255, 0.9), transparent);
    background-repeat: repeat;
    background-size: 400px 100px;
    animation: sparkle 4s linear infinite;
}

.stars-medium {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 60px 120px, #fff, transparent),
        radial-gradient(2px 2px at 150px 50px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 250px 100px, #fff, transparent);
    background-repeat: repeat;
    background-size: 500px 120px;
    animation: sparkle 6s linear infinite reverse;
}

.stars-large {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(3px 3px at 100px 200px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 300px 100px, rgba(255, 255, 255, 0.8), transparent);
    background-repeat: repeat;
    background-size: 600px 300px;
    animation: sparkle 8s linear infinite;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 10;
}

.hero-text {
    width: 100%;
    animation: fadeInLeft 0.8s ease-out;
}

.hero-badge {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 2rem;
    text-align: center;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    text-align: center;
}

.hero-description {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    line-height: 1.6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    text-align: justify;
    text-align-last: center;
}

.hero-benefit-box {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 2rem;
}

.hero-benefit-text {
    font-size: 1.05rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0;
    text-align: justify;
    text-align-last: center;
}

.hero-benefit-text strong {
    color: var(--primary);
    font-weight: 700;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 3rem;
    width: 100%;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    border: 2px solid transparent; /* iguala la caja con la del botón secundario */
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border: 2px solid var(--primary);
}

/* Los botones del hero ocupan todo el ancho de la columna, como bloque */
.hero-buttons .btn {
    width: 100%;
    padding: 1.1rem 2rem;
    justify-content: center;
    text-align: center;
}

.btn-icon {
    width: 16px;
    height: 16px;
}

.hero-image {
    display: flex;
    justify-content: center;
    order: -1;
    animation: fadeInRight 0.8s ease-out 0.2s both;
}

.image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-image {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    z-index: 10;
}

.scroll-arrow {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
}

/* =========================
   Secciones (general)
========================= */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.section-description {
    font-size: 1.25rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.section-description strong {
    color: var(--text);
}

/* =========================
   Validación
========================= */
.validacion {
    padding: 8rem 0;
    position: relative;
}

.validacion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.validacion-item {
    background: var(--card);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

.validacion-icon {
    width: 48px;
    height: 48px;
    color: var(--primary);
    margin: 0 auto 1rem;
}

.validacion-item p {
    color: var(--text-muted);
    line-height: 1.6;
}

.validacion-statement {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 3rem;
    background: var(--card);
    border-radius: 1rem;
}

.validacion-statement h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text);
}

.validacion-statement p {
    font-size: 1.25rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* =========================
   Para Quién
========================= */
.para-quien {
    padding: 6rem 0;
}

.para-quien-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.para-quien-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--card);
    border-radius: 0.75rem;
}

.para-quien-card .check-icon {
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.para-quien-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

.para-quien-card strong {
    color: var(--text);
    font-weight: 600;
}

/* =========================
   Reencuadre
========================= */
.reencuadre {
    padding: 8rem 0;
    position: relative;
}

.reencuadre-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.reencuadre-intro {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
}

.reencuadre-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.reencuadre-column {
    background: var(--card);
    border-radius: 1rem;
    padding: 2rem;
    text-align: left;
}

.reencuadre-column h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reencuadre-column ul {
    list-style: none;
    padding: 0;
}

.reencuadre-column li {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
}

.reencuadre-column li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-size: 1.5rem;
}

.reencuadre-statement {
    padding: 2rem;
    background: var(--card);
    border-radius: 1rem;
}

.reencuadre-statement p {
    font-size: 1.5rem;
    color: var(--text);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

/* =========================
   Servicios
========================= */
.servicios {
    padding: 8rem 0;
    position: relative;
}

.servicios-category {
    margin-bottom: 4rem;
}

.category-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2rem;
    text-align: center;
    padding-bottom: 1rem;
}

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.servicio-card {
    background: var(--card);
    border: 2px solid var(--primary);
    border-radius: 1rem;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    animation: fadeInUp 0.8s ease-out;
    overflow: hidden;
    min-height: 600px;
}

.servicio-image {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.servicio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.servicio-content {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.servicio-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.servicio-card h4 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 1rem;
}

.servicio-card p {
    color: var(--text-muted);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.servicio-bullets {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.servicio-bullets li {
    padding: 0.4rem 0 0.4rem 1.5rem;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--primary);
}

.servicio-bullets li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}

.servicio-ejemplos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.ejemplo-tag {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background: rgba(var(--primary-rgb), 0.15);
    border-radius: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.servicio-perfect {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 1rem 0;
    padding: 0.75rem;
    background: rgba(var(--primary-rgb), 0.08);
    border-radius: 0.5rem;
}

.servicio-perfect i,
.servicio-perfect svg {
    color: var(--primary);
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
}

.servicio-note-small {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.75rem;
    opacity: 0.8;
}

/* Bloque de orientación bajo el grid de servicios: no es letra chica
   ni una cuarta card, es una guía de lectura. */
.servicios-orientacion {
    max-width: 46rem;
    margin: 3rem auto 0;
    text-align: center;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.servicios-orientacion h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
}

.servicios-orientacion p {
    margin: 0 0 0.85rem;
    font-size: inherit;
    color: inherit;
}

.servicios-orientacion p:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .servicios-orientacion {
        margin-top: 2rem;
        font-size: 0.95rem;
        text-align: left;
    }
}

.servicio-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-top: auto;
    margin-bottom: 1rem;
}

.price-alt {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-muted);
    display: block;
    margin-top: 0.5rem;
}

.servicio-btn {
    background: var(--primary);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    display: block;
    width: 100%;
}

.servicio-destacado {
    position: relative;
    border: 2px solid var(--primary);
    box-shadow: 0 12px 30px rgba(var(--secondary-rgb), 0.10);
}

/* =========================
   Diferenciador
========================= */
.diferenciador {
    padding: 8rem 0;
    position: relative;
}

.diferenciador-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.diferenciador-column {
    background: var(--card);
    border-radius: 1rem;
    padding: 3rem;
}

.diferenciador-column h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text);
}

.diferenciador-column ul {
    list-style: none;
    padding: 0;
}

.diferenciador-column li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.diferenciador-column li i {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.diferenciador-column.no li i {
    color: #ff6464;
}

.diferenciador-column.si li i {
    color: var(--primary);
}

/* =========================
   Cómo trabajamos
========================= */
.como-trabajamos {
    padding: 6rem 0;
}

.pasos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.paso-item {
    background: transparent;
    border-radius: 1rem;
    padding: 2rem;
}

.paso-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.paso-item h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text);
}

.paso-item p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.paso-item ul {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
}

.paso-item ul li {
    color: var(--text-muted);
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
}

.paso-item ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--secondary);
}

.paso-note {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-muted);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--primary-rgb), 0.2);
}

.paso-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}

.paso-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--primary);
    border-radius: 2rem;
    font-size: 0.9rem;
    color: #fff;
    font-weight: 500;
}

/* =========================
   Validación / Eco (testimonios)
========================= */
.validacion-eco {
    padding: 6rem 0;
}

.testimonios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.testimonio-item {
    background: var(--card);
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
}

.quote-icon {
    color: var(--secondary);
    opacity: 0.6;
    margin-bottom: 1rem;
}

.testimonio-item p {
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.7;
    font-style: italic;
}

.validacion-eco-statement {
    text-align: center;
    font-size: 1.2rem;
    color: var(--text);
    margin-top: 3rem;
    padding: 2rem;
    background: var(--card);
    border-radius: 1rem;
    font-weight: 500;
}

/* =========================
   Sobre mí
========================= */
.sobre-mi {
    padding: 8rem 0;
    position: relative;
    background: linear-gradient(rgba(38, 28, 20, 0.42), rgba(38, 28, 20, 0.42)), url("bg-madera.jpg") center / cover no-repeat;
}

.sobre-mi-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.sobre-mi-image {
    border-radius: 1rem;
    overflow: hidden;
}

.sobre-mi-image img {
    width: 100%;
    height: auto;
    display: block;
}

.sobre-mi-text p {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.sobre-mi-highlight {
    padding: 1.25rem;
    background: var(--card);
    border-left: 3px solid var(--primary);
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

.sobre-mi-highlight p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* =========================
   CTA final
========================= */
.cta-final {
    padding: 8rem 0;
    position: relative;
}

.cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.cta-option {
    background: var(--card);
    border: 2px solid var(--primary);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    text-decoration: none;
}

.cta-icon {
    margin-bottom: 1rem;
    color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-icon i {
    width: 48px;
    height: 48px;
}

.cta-option h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.cta-price {
    font-size: 1rem;
    color: var(--primary);
    font-weight: 600;
}

.cta-description {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.cta-destacada {
    background: var(--card);
    border: 2px solid var(--primary);
    box-shadow: 0 12px 30px rgba(var(--secondary-rgb), 0.10);
}

/* =========================
   Contacto
========================= */
/* Contacto + Footer comparten UNA sola hoja continua (sin corte entre ambos).
   La imagen y su capa de oscurecido van en el contenedor; las dos secciones
   internas quedan transparentes para que la hoja se vea sin repetirse. */
.contacto-footer {
    position: relative;
    z-index: 1;
    background: linear-gradient(rgba(54, 64, 59, 0.74), rgba(54, 64, 59, 0.74)), url("bg-hoja.jpg") center / cover no-repeat;
}

.contacto {
    padding: 8rem 0;
    position: relative;
    background: transparent;
}

.contact-stars-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.contact-stars-small {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.6), transparent);
    background-repeat: repeat;
    background-size: 400px 100px;
    animation: sparkle 4s linear infinite;
}

.contact-stars-medium {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 60px 120px, #fff, transparent);
    background-repeat: repeat;
    background-size: 500px 120px;
    animation: sparkle 6s linear infinite reverse;
}

.contacto-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    position: relative;
    z-index: 1;
}

.contact-form {
    background: var(--card);
    border-radius: 1rem;
    padding: 2rem;
}

.contact-form-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text);
}

.form-container {
    margin-bottom: 1rem;
    /* El iframe de Tally crece solo (dynamicHeight): el contenedor
       no debe limitarlo ni recortarlo. */
    height: auto;
    max-height: none;
    overflow: visible;
}

/* El iframe se comporta como bloque para que no quede el hueco de
   línea base bajo él. Sin alto fijo: lo controla el script de Tally. */
.form-container iframe {
    display: block;
    width: 100%;
    border: 0;
}

.redes-sociales {
    padding: 2rem;
}

.redes-sociales h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text);
}

.redes-sociales p {
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* Ventana al atardecer, bajo las redes sociales */
.contacto-ventana {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin-top: 2rem;
    opacity: 1;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.redes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.red-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 0.5rem;
    text-decoration: none;
}

.red-icon {
    font-size: 1.5rem;
    color: var(--text);
}

/* =========================
   Footer
========================= */
.footer {
    padding: 3rem 0;
    text-align: center;
    position: relative;
    z-index: 1;
    background: transparent;
}

.footer-message {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 1rem;
}

.footer-copy {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* =========================
   Animaciones
========================= */
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

/* Aparición al hacer scroll (controlada desde script.js) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* =========================
   Responsive
========================= */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: linear-gradient(rgba(50, 60, 55, 0.94), rgba(50, 60, 55, 0.94)), url("bg-hoja.jpg") center / cover no-repeat;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 2rem;
        transition: var(--transition);
        gap: 1.5rem;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-toggle {
        display: flex;
    }

    .hero-content {
        gap: 2rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    /* En móvil los botones se apilan a todo el ancho (siguen siendo iguales) */
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-image {
        width: 250px;
        height: 250px;
    }

    .section-title {
        font-size: 2rem;
    }

    .reencuadre-columns,
    .diferenciador-grid,
    .sobre-mi-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contacto-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .servicios-grid,
    .pasos-grid,
    .testimonios-grid,
    .para-quien-grid {
        grid-template-columns: 1fr;
    }

    .category-title {
        font-size: 1.5rem;
    }

    .paso-options {
        flex-direction: column;
    }

    .paso-tag {
        text-align: center;
    }

    .servicio-ejemplos {
        justify-content: center;
    }

    .hero-benefit-box {
        padding: 1rem;
    }

    .hero-benefit-text {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    .para-quien-card {
        padding: 1rem;
    }

    .paso-item {
        padding: 1.5rem;
    }

    .servicio-perfect {
        font-size: 0.9rem;
    }
}

/* =========================
   Movimiento reducido
   Respeta a quien marea o cansa la animación (sistema nervioso primero)
========================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    /* Las estrellas quedan fijas y tenues, sin parpadeo */
    body::before,
    body::after,
    .stars-small,
    .stars-medium,
    .stars-large,
    .contact-stars-small,
    .contact-stars-medium {
        opacity: 0.18;
    }

    /* Lo que aparece con scroll se muestra de entrada */
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================
   Ilustraciones decorativas
   Acuarelas tipo "rincón al atardecer" repartidas por la página.
   Van detrás del contenido y no son clicables.
   Ajusta posición/tamaño/opacidad con cada clase .deco-*
========================= */
.deco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    height: auto;
}

/* Reencuadre "respirar": una planta arriba a la derecha */
.deco-plant {
    right: 30px;
    top: 24px;
    width: 120px;
    opacity: 0.95;
}

/* Sobre mí: el sillón encima de la foto, esquina inferior izquierda (anclado al contenido) */
.sobre-mi-content { position: relative; }
.deco-armchair {
    left: -30px;
    bottom: -18px;
    width: 230px;
    opacity: 1;
    z-index: 3; /* por encima de la foto */
}

@media (max-width: 768px) {
    .deco-plant    { width: 80px; right: 14px; top: 14px; }
    .deco-armchair { display: none; }
}

/* =========================
   Guiños a mano → Cedarville Cursive
   Va al final a propósito: así gana a las reglas de .brand-text y
   .footer-message de más arriba. Cedarville solo trae Regular y ya es
   inclinada, así que forzamos peso normal y sin itálica, y apagamos la
   síntesis para que el navegador no la engorde ni la tuerza.
========================= */
.brand-text,
.footer-message {
    font-family: var(--font-accent);
    font-weight: 400;
    font-style: normal;
    font-synthesis: none;
}

.brand-text {
    font-size: 1.6rem;
    letter-spacing: 0.01em;
}

.footer-message {
    font-size: 1.45rem;
    line-height: 1.5;
}

/* =========================================================
   Paso 1 — Aplanar fondos
   Quita los fondos de todas las secciones: el degradado del body
   (ya pasó a color plano), las estrellas y las superficies de las
   tarjetas. El color/textura de header, contacto y footer se define
   más abajo, en el bloque "Paso 2". El resto de secciones queda sobre
   el fondo base hasta que les demos color, de a poco.
   Para revertir: borra este bloque.
========================================================= */

/* Estrellas: fuera */
body::before,
body::after,
.stars-small,
.stars-medium,
.stars-large,
.contact-stars-small,
.contact-stars-medium {
    display: none;
}

/* Superficies de las tarjetas dentro de las secciones: sin fondo */
.hero-benefit-box,
.validacion-item,
.validacion-statement,
.para-quien-card,
.reencuadre-column,
.reencuadre-statement,
.servicio-card,
.diferenciador-column,
.testimonio-item,
.validacion-eco-statement,
.sobre-mi-highlight,
.cta-option,
.cta-destacada,
.contact-form {
    background: transparent;
}

/* =========================================================
   Paso 2 — Fotos de fondo
   Hero, header, contacto y footer: hoja verde. Cuerpo: papel.
   Sobre mí: madera. (La sábana queda guardada para más adelante.)
   Sobre las texturas oscuras el texto va blanco; sobre el papel,
   sage oscuro (lo definido arriba en :root).
   Las capas de color sobre cada foto controlan el contraste:
   sube la opacidad si quieres el texto más legible, bájala para
   que se vea más la textura.
========================================================= */
.hero,
.header,
.contacto,
.footer,
.sobre-mi {
    --text: #FFFFFF;
    --text-muted: #DDE6E1;
    color: var(--text);
}

/* =========================================================
   Fix del papel
   Antes el papel cubría TODA la página (muy alta) y el navegador lo
   estiraba: se veía expandido y pixelado. Ahora va como una capa fija
   del tamaño de la pantalla, detrás del contenido: nítido y estable.
   Si lo quieres más sutil, baja la opacidad de esta capa.
========================================================= */
body::before {
    content: "";
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #d9d8d2 url("bg-papel.jpg") center / cover no-repeat;
    animation: none;
    opacity: 1;
}


/* =========================================================
   Tarjetas de servicios
   Fondo verde sage (el mismo de los títulos) con texto blanco y una sombra
   suave para separarlas del papel. Los acentos que eran terracota (subtítulo,
   viñetas, íconos, precio) no se leen sobre el verde, así que van en blanco.
   El botón y el borde siguen en terracota.
========================================================= */
.servicio-card {
    background: #37443C;
    border-color: #37443C;
    box-shadow: 0 14px 34px rgba(40, 48, 42, 0.22);
    --text: #FFFFFF;
    --text-muted: #DCE3DE;
    color: var(--text);
}

.servicio-card h4,
.servicio-card .servicio-bullets li,
.servicio-card .servicio-bullets li::before,
.servicio-card .servicio-perfect i,
.servicio-card .servicio-perfect svg,
.servicio-card .servicio-price {
    color: #FFFFFF;
}

/* "Perfecto si" y los tags (Auditoría, Lead magnet, etc.): un verde un poco
   más claro, para que resalten sobre el verde de la card. */
.servicio-card .servicio-perfect,
.servicio-card .ejemplo-tag {
    background: #4C5C52;
}

/* =========================================================
   MEJORAS CARACOL · v2  (capa final: gana al resto por orden)
   ---------------------------------------------------------
   Idea: cerrar el bajón de producción entre el hero/footer (ricos)
   y las secciones de "papel" (hoy texto suelto, sin caja).
   Sistema de TRES pesos de superficie, cada uno con un significado:
     · CREMA (lino, texto oscuro)      → info de apoyo = el respiro
     · VERDE sage (#37443C, blanco)    → las ofertas (servicios + auditoría)
     · BANDA OSCURA (hoja + terracota) → las frases-tesis = los golpes
   Para revertir todo: borra desde este comentario hasta el final.
========================================================= */

:root{
  --card-cream:        #f3eee3;   /* lino cálido, más claro que el papel */
  --card-cream-border: #e4dccb;
  --card-shadow:       0 1px 2px rgba(58,48,36,.05), 0 10px 26px rgba(58,48,36,.07);
  --card-shadow-lift:  0 6px 14px rgba(58,48,36,.10), 0 18px 40px rgba(58,48,36,.12);
  --green:             #37443C;   /* el verde de tus cards de servicios */
  --primary-light:     #db8e69;   /* terracota legible sobre fondo oscuro */
  --text-muted:        #4c483f;   /* sube el contraste del cuerpo sobre papel */
}

/* ---- 1 · Contención: tarjetas de apoyo en crema -------------------- */
.validacion-item,
.para-quien-card,
.paso-item,
.testimonio-item,
.cta-option{
  background: var(--card-cream);
  border: 1px solid var(--card-cream-border);
  box-shadow: var(--card-shadow);
  border-radius: 1rem;
}
.validacion-item p,
.para-quien-card p,
.paso-item p,
.cta-description{ color: var(--text-muted); }
.validacion-item strong,
.para-quien-card strong{ color: #2b2823; }

/* ---- 2 · Frases-tesis: bandas oscuras (mismo material que el hero) -- */
.validacion-statement,
.reencuadre-statement,
.validacion-eco-statement{
  background: linear-gradient(rgba(30,38,33,.88), rgba(20,28,24,.92)),
              url("bg-hoja.jpg") center / cover no-repeat;
  border: none;
  border-radius: 1.25rem;
  box-shadow: var(--card-shadow-lift);
  padding: 3rem 2.5rem;
  color: #fff;
}
.validacion-statement h3,
.reencuadre-statement p:first-child{ color:#fff; }       /* el golpe, en blanco pleno */
.validacion-statement p,
.reencuadre-statement p,
.validacion-eco-statement{ color: rgba(255,255,255,.9); }
.validacion-statement strong,
.reencuadre-statement strong,
.validacion-eco-statement strong{ color: var(--primary-light); }

/* ---- 3 · Reencuadre Menos / Más: crema, con guiño frío/cálido ------ */
.reencuadre-column{
  background: var(--card-cream);
  border: 1px solid var(--card-cream-border);
  box-shadow: var(--card-shadow);
}
.reencuadre-column.menos{ background:#edece6; border-color:#dedbd2; }   /* lo que se suelta */
.reencuadre-column li{ color: var(--text-muted); }

/* ---- 4 · Lo que NO / Lo que SÍ: contraste real -------------------- */
.diferenciador-column{ box-shadow: var(--card-shadow); border-radius:1rem; padding:2.25rem; }
.diferenciador-column.no{ background:#eae8e2; border:1px solid #dcd9d1; }
.diferenciador-column.no h3{ color:#6f6b62; }
.diferenciador-column.no li{ color:#74706a; }
.diferenciador-column.no li i{ color:#a39e95; }          /* gris suave, no rojo: "se suelta" */
.diferenciador-column.si{
  background:#e6ece0; border:1px solid #d2dac8;
  box-shadow: var(--card-shadow-lift);                   /* el SÍ pesa un poco más */
}
.diferenciador-column.si li i{ color: var(--primary); }

/* ---- 5 · Servicios: rejilla pareja + Auditoría como primaria ------- */
.servicios-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.75rem; }
.servicio-card{ flex: 0 1 340px; }                       /* mismo ancho en ambas filas */
.servicio-destacado{
  transform: translateY(-8px);
  border: 3px solid var(--primary);
  box-shadow: 0 18px 44px rgba(40,48,42,.30);
  position: relative;
}
.servicio-destacado::before{
  content:"Recomendado";
  position:absolute; top:0; left:0; right:0; z-index:3;
  background: var(--primary); color:#fff;
  font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  text-align:center; padding:.5rem;
}
.servicio-destacado .servicio-image{ margin-top:2.1rem; } /* sitio para la cinta */

/* ---- 6 · Testimonios: 2×2 con comilla visible --------------------- */
.testimonios-grid{
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width: 880px; margin-left:auto; margin-right:auto; gap:1.5rem;
}
.testimonio-item{ padding-top:2.75rem; }
.quote-icon{
  width:34px; height:34px; color: var(--primary); opacity:.85;
  position:absolute; top:1.25rem; left:1.5rem; margin:0;
}

/* ---- 7 · CTA final: 1 primaria (verde) + 1 ligera (crema) --------- */
.cta-grid{
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width: 760px; margin-left:auto; margin-right:auto; gap:1.75rem;
}
.cta-destacada{ background: var(--green); border-color: var(--green); box-shadow: var(--card-shadow-lift); }
.cta-destacada h3,
.cta-destacada .cta-price,
.cta-destacada .cta-description,
.cta-destacada .cta-icon{ color:#fff; }

/* ---- 8 · Sobre mí: (reescrito en claro más abajo, ver bloque MOODBOARD) -- */

/* ---- 9 · Aire: menos desierto entre secciones -------------------- */
.validacion, .reencuadre, .servicios, .diferenciador, .cta-final{ padding: 5rem 0; }
.para-quien, .como-trabajamos, .validacion-eco{ padding: 4.5rem 0; }
.section-header{ margin-bottom: 2.5rem; }
.validacion-grid{ margin-bottom: 2.5rem; }
.reencuadre-columns, .diferenciador-grid{ gap: 2rem; }

/* ---- Responsivo: re-gana en móvil (va al final a propósito) ------- */
@media (max-width: 768px){
  .testimonios-grid, .cta-grid{ grid-template-columns: 1fr; }
  .servicio-card{ flex-basis: 100%; }
  .servicio-destacado{ transform:none; }
  .validacion, .reencuadre, .servicios, .diferenciador, .cta-final,
  .para-quien, .como-trabajamos, .validacion-eco{ padding: 3.25rem 0; }
  .validacion-statement, .reencuadre-statement, .validacion-eco-statement{ padding: 2.25rem 1.5rem; }
  .diferenciador-column{ padding: 1.75rem; }
}

/* =========================================================
   MOODBOARD · «Sobre mí» en claro  (reemplaza la madera)
   ---------------------------------------------------------
   Marce no quería la sección de madera. El moodboard es papel
   crema + serif en carboncillo + eyebrow Karla en MAYÚSCULA +
   espiral. Llevo «Sobre mí» a ese registro: luz, aire, calma.
   (El hero y el footer oscuros se mantienen — esos te gustaban.)
   Para revertir: borra desde este comentario hasta el final.
========================================================= */

/* Fondo claro + texto oscuro (gana al override blanco de arriba) */
.sobre-mi{
  background: linear-gradient(180deg, #f6f2ea 0%, #efe8db 100%);
  padding: 6.5rem 0;
  --text: #2b2823;
  --text-muted: #4c483f;
  color: var(--text);
}

/* Eyebrow estilo moodboard: Karla, mayúscula, con tracking */
.section-eyebrow{
  font-family: 'Karla', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .8rem;
  font-weight: 600;
  color: #7c7468;
  margin-bottom: 1.1rem;
}

/* Titular más liviano y elegante, como el del moodboard */
.sobre-mi .section-title{
  font-weight: 500;             /* usa la Libertine regular, no la negra */
  font-size: 2.7rem;
  letter-spacing: -0.01em;
  color: #2b2823;
}
.sobre-mi .section-title em{ font-style: italic; }   /* «Marcela» en cursiva serif */
.sobre-mi-text strong{ color: var(--text); }

/* La frase-corazón: pull-quote en cursiva, no caja oscura */
.sobre-mi-highlight{
  background: transparent;
  border: none;
  border-left: 2px solid var(--primary);
  border-radius: 0;
  padding: .35rem 0 .35rem 1.4rem;
  margin: 2rem 0;
}
.sobre-mi-highlight p{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.5;
  color: #3a3630;
}
.sobre-mi-highlight strong{ font-weight: 600; color:#2b2823; }

/* Foto: marco suave sobre crema */
.sobre-mi-image{
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(58,48,36,.06), 0 20px 44px rgba(58,48,36,.14);
  border: 1px solid rgba(0,0,0,.05);
}

/* Espiral de cierre (el guiño Caracol del moodboard) */
.caracol-spiral{ margin: 2.5rem 0 0; color: #b7ad9c; line-height: 0; }
.caracol-spiral svg{ width: 46px; height: 46px; display: block; }

/* Móvil */
@media (max-width: 768px){
  .sobre-mi{ padding: 4rem 0; }
  .sobre-mi .section-title{ font-size: 2.1rem; }
  .sobre-mi-highlight p{ font-size: 1.25rem; }
  .caracol-spiral{ margin-left:auto; margin-right:auto; }
  .caracol-spiral svg{ margin: 0 auto; }
}

/* =========================================================
   TEMA UNIFICADO · una sola hoja de fondo  (capa final)
   ---------------------------------------------------------
   Marce: "que la página tenga SOLO la hoja de fondo, fija, y
   que el contenido vaya corriendo por encima. Texto blanco
   como en el hero y los acentos en terracota. Sin espiral."
   Esta capa va al final a propósito: gana por orden a todo lo
   anterior (papel, crema, madera, verde, moodboard).
   Para revertir: borra desde este comentario hasta el final.
========================================================= */

/* Texto blanco global + tokens de superficie -------------- */
:root{
  --text:         #FFFFFF;               /* texto principal: blanco (como el hero) */
  --text-muted:   rgba(255,255,255,.82); /* texto secundario: blanco suave */
  --accent-terra: #dc8a62;               /* terracota legible sobre fondo oscuro */
  --panel:        rgba(20,28,24,.55);    /* tarjeta translúcida: deja ver la hoja */
  --panel-strong: rgba(13,19,16,.66);    /* tarjeta de énfasis (frases-tesis, ofertas) */
  --panel-border: rgba(255,255,255,.12);
  --panel-shadow: 0 10px 30px rgba(0,0,0,.28);
}

/* La hoja, fija, detrás de todo. El contenido corre por encima.
   La capa de color la oscurece lo justo para leer en blanco:
   baja su opacidad si quieres ver más la textura. ----------- */
body{ background:#222a25; }                /* respaldo si la foto no carga */
body::before{
  content:"";
  display:block;
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(34,42,37,.52), rgba(26,34,29,.58)),
    url("bg-hoja.jpg") center / cover no-repeat;
  animation:none;
  opacity:1;
}

/* Secciones sin fondo propio → se ve la única hoja de abajo */
body .hero,
body .sobre-mi,
body .contacto-footer{ background:transparent; }

/* "Sobre mí" vuelve al registro oscuro (adiós moodboard claro) */
body .sobre-mi{
  --text:#FFFFFF;
  --text-muted:rgba(255,255,255,.82);
  color:var(--text);
  padding:6rem 0;
}
body .sobre-mi .section-title{ color:#FFFFFF; }
body .sobre-mi-text strong{ color:#FFFFFF; }
body .section-eyebrow{ color:var(--accent-terra); }
body .sobre-mi-highlight{
  background:transparent;
  border:none;
  border-left:2px solid var(--accent-terra);
  border-radius:0;
}
body .sobre-mi-highlight p{ color:rgba(255,255,255,.9); }
body .sobre-mi-highlight strong{ color:#FFFFFF; }
body .sobre-mi-image{
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 44px rgba(0,0,0,.32);
}
body .caracol-spiral{ display:none; }      /* espiral fuera, por si quedara en el HTML */

/* Tarjetas: un solo material translúcido sobre la hoja ------ */
body .validacion-item,
body .para-quien-card,
body .reencuadre-column,
body .reencuadre-column.menos,
body .paso-item,
body .testimonio-item,
body .diferenciador-column,
body .diferenciador-column.no,
body .diferenciador-column.si,
body .cta-option,
body .contact-form{
  background:var(--panel);
  border:none;
  box-shadow:var(--panel-shadow);
  border-radius:1rem;
}

/* Texto dentro de tarjetas: blanco; acentos en terracota ---- */
body .validacion-item strong,
body .para-quien-card strong,
body .diferenciador-column h3,
body .diferenciador-column.no h3{ color:#FFFFFF; }
body .diferenciador-column.no li{ color:rgba(255,255,255,.82); }
body .diferenciador-column.no li i{ color:rgba(255,255,255,.45); }  /* "se suelta": gris suave */
body .diferenciador-column.si li i{ color:var(--accent-terra); }
body .validacion-icon,
body .para-quien-card .check-icon,
body .cta-icon,
body .quote-icon,
body .servicio-perfect i,
body .servicio-perfect svg{ color:var(--accent-terra); }
body .hero-benefit-text strong{ color:var(--accent-terra); }

/* Frases-tesis: misma familia, un punto más oscuras --------- */
body .validacion-statement,
body .reencuadre-statement,
body .validacion-eco-statement{
  background:var(--panel-strong);
  border:none;
  box-shadow:0 14px 36px rgba(0,0,0,.34);
}

/* Tarjetas de servicios: panel oscuro + borde terracota, y los
   acentos (subtítulo, viñetas, precio) vuelven a terracota
   porque ahora sí se leen sobre el fondo oscuro. ------------- */
body .servicio-card{
  background:var(--panel-strong);
  border:none;
  --text:#FFFFFF;
  --text-muted:rgba(255,255,255,.82);
  color:var(--text);
}
body .servicio-card h4,
body .servicio-card .servicio-price,
body .servicio-card .servicio-bullets li,
body .servicio-card .servicio-bullets li::before,
body .servicio-card .servicio-perfect i,
body .servicio-card .servicio-perfect svg{ color:var(--accent-terra); }
body .servicio-card .servicio-perfect{ background:rgba(255,255,255,.07); }
body .servicio-card .ejemplo-tag{ background:rgba(var(--primary-rgb),.20); color:rgba(255,255,255,.88); }

/* CTA destacada: del verde al panel oscuro con borde terracota */
body .cta-destacada{
  background:var(--panel-strong);
  border:none;
}
body .cta-destacada h3,
body .cta-destacada .cta-price,
body .cta-destacada .cta-description,
body .cta-destacada .cta-icon{ color:#FFFFFF; }

/* Texto que va directo sobre la hoja (sin tarjeta): una sombra
   mínima para que el blanco no se pierda en las zonas claras. */
body .section-title,
body .section-description,
body .category-title,
body .reencuadre-intro,
body .sobre-mi-text p,
body .footer-message{
  text-shadow:0 1px 14px rgba(0,0,0,.45);
}

/* ============================================================
   FRASES EN KARLA MAYÚSCULAS + AIRE EN ÍCONO DE TESTIMONIOS
   (capa final · reversible: borra este bloque para revertir)
   ============================================================ */

/* Frases destacadas: Karla, todo en mayúsculas, con un poco de
   tracking para que las mayúsculas respiren y se vean intencionales. */
body .hero-badge span,
body .validacion-statement h3,
body .reencuadre-statement p,
body .category-title,
body .validacion-eco-statement,
body .servicio-perfect strong,
body .sobre-mi-highlight p strong{
  font-family: 'Karla', system-ui, -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Frases-tesis grandes en mayúscula: conservar jerarquía e
   interlineado holgado (las mayúsculas "pesan" más a la vista). */
body .validacion-statement h3,
body .reencuadre-statement p,
body .category-title,
body .validacion-eco-statement{
  font-weight: 700;
  line-height: 1.3;
}

/* "PERFECTO SI:" y "DE AHÍ NACE…" son etiquetas dentro de un
   párrafo: destacan sin descuadrar el interlineado del texto. */
body .servicio-perfect strong,
body .sobre-mi-highlight p strong{
  letter-spacing: 0.03em;
}

/* Testimonios: el ícono de comillas flota arriba-izquierda;
   le doy aire para que no quede pegado al texto. */
body .testimonio-item{
  padding-top: 4.5rem;
}

/* ============================================================
   ESTAMPILLAS · las tarjetas de servicio (las más oscuras)
   pasan a fondo blanco con borde perforado de estampilla.
   (capa final · reversible: borra este bloque para revertir)
   ============================================================ */
body .servicio-card{
  --r: 4px;     /* radio de la perforación */
  --s: 13px;    /* separación entre perforaciones */
  background:#FBF7F0;            /* blanco cálido tipo papel de estampilla */
  border:0;
  border-radius:0;
  padding:8px;                  /* marco blanco donde caen las perforaciones */
  box-shadow:none;
  color:#2c332e;
  --text:#2c332e;
  --text-muted:rgba(44,51,46,.72);
  filter: drop-shadow(0 12px 26px rgba(28,34,29,.30));
  -webkit-mask:
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-x top    / var(--s) calc(2*var(--r)),
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-x bottom / var(--s) calc(2*var(--r)),
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-y left   / calc(2*var(--r)) var(--s),
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-y right  / calc(2*var(--r)) var(--s),
    linear-gradient(#000,#000) no-repeat center / calc(100% - 2*var(--r)) calc(100% - 2*var(--r));
  mask:
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-x top    / var(--s) calc(2*var(--r)),
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-x bottom / var(--s) calc(2*var(--r)),
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-y left   / calc(2*var(--r)) var(--s),
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-y right  / calc(2*var(--r)) var(--s),
    linear-gradient(#000,#000) no-repeat center / calc(100% - 2*var(--r)) calc(100% - 2*var(--r));
}

/* La foto, enmarcada dentro del marco blanco */
body .servicio-card .servicio-image,
body .servicio-card .servicio-image img{ border-radius:0; }

/* Texto oscuro sobre el blanco; acentos en terracota oscuro (legible) */
body .servicio-card h3{ color:#232a25; }
body .servicio-card h4,
body .servicio-card .servicio-price,
body .servicio-card .servicio-bullets li::before,
body .servicio-card .servicio-perfect i,
body .servicio-card .servicio-perfect svg,
body .servicio-card .servicio-perfect strong{ color:var(--primary); }
body .servicio-card .servicio-bullets li{ color:#2c332e; }
body .servicio-card p{ color:#2c332e; }
body .servicio-card .price-alt,
body .servicio-card .servicio-note-small{ color:rgba(44,51,46,.62); }

/* Caja "Perfecto si:" como sello tenue terracota */
body .servicio-card .servicio-perfect{
  background:rgba(173,106,75,.08);
  color:#2c332e;
}

/* Etiquetas tipo sello, terracota sobre blanco */
body .servicio-card .ejemplo-tag{
  background:rgba(173,106,75,.12);
  color:#8a4f37;
  border:1px solid rgba(173,106,75,.28);
}

/* Botón: se mantiene relleno terracota con texto blanco (ya legible) */
body .servicio-card .servicio-btn{ box-shadow:none; }

/* Destacada: sin el borde sólido (lo reemplaza la perforación);
   conservo el realce y meto la cinta dentro del marco blanco. */
body .servicio-destacado{
  border:0;
  box-shadow:none;
  filter: drop-shadow(0 16px 34px rgba(28,34,29,.34));
}
body .servicio-destacado::before{
  top:8px; left:8px; right:8px;
}

/* ============================================================
   MÁS ESTAMPILLAS · frases-tesis y CTA destacada
   (los paneles oscuros restantes) también pasan a estampilla
   blanca con borde perforado. (capa final · reversible)
   ============================================================ */
body .validacion-statement,
body .reencuadre-statement,
body .validacion-eco-statement,
body .cta-destacada{
  --r:4px; --s:13px;
  background:#FBF7F0;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter: drop-shadow(0 12px 26px rgba(28,34,29,.30));
  -webkit-mask:
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-x top    / var(--s) calc(2*var(--r)),
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-x bottom / var(--s) calc(2*var(--r)),
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-y left   / calc(2*var(--r)) var(--s),
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-y right  / calc(2*var(--r)) var(--s),
    linear-gradient(#000,#000) no-repeat center / calc(100% - 2*var(--r)) calc(100% - 2*var(--r));
  mask:
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-x top    / var(--s) calc(2*var(--r)),
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-x bottom / var(--s) calc(2*var(--r)),
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-y left   / calc(2*var(--r)) var(--s),
    radial-gradient(circle var(--r) at center, #000 96%, #0000) repeat-y right  / calc(2*var(--r)) var(--s),
    linear-gradient(#000,#000) no-repeat center / calc(100% - 2*var(--r)) calc(100% - 2*var(--r));
}

/* Golpe / títulos en oscuro */
body .validacion-statement h3,
body .cta-destacada h3{ color:#232a25; }

/* Cuerpo en oscuro (incluye las líneas que antes iban en blanco) */
body .validacion-statement p,
body .validacion-eco-statement,
body .cta-destacada .cta-description,
body .reencuadre-statement p,
body .reencuadre-statement p strong,
body .reencuadre-statement p:first-child,
body .reencuadre-statement p:first-child strong{ color:#2c332e; }

/* Acentos en terracota oscuro (legibles sobre el blanco) */
body .validacion-eco-statement strong,
body .reencuadre-statement p:last-child strong,
body .cta-destacada .cta-price,
body .cta-destacada .cta-icon{ color:var(--primary); }

/* =========================================================
   CAPA EDITORIAL · Washi tapes + papel claro  (capa final)
   ---------------------------------------------------------
   Se conservan intactos header, hero, contacto y footer
   (siguen sobre la hoja oscura). "El resto" pasa a un
   registro editorial claro tipo revista: fondo greige mate,
   tarjetas de lino crema, serif en tinta, etiquetas en
   terracota mayúscula y cintas washi sobre las fotos.
   Va al final a propósito: gana por orden a las capas de
   hoja oscura, estampillas y mayúsculas Karla.
   Para revertir: borra desde este comentario hasta el final.
========================================================= */
:root{
  --ed-bg:          #d7d3cb;   /* greige mate del papel */
  --ed-bg-2:        #dcd8d0;   /* variante para alternar secciones */
  --ed-card:        #ece7dd;   /* lino cálido de las tarjetas */
  --ed-card-2:      #e6e1d6;   /* tarjeta secundaria / hundida */
  --ed-border:      #ddd6c8;   /* borde de tarjeta, muy tenue */
  --ed-ink:         #2c2a26;   /* tinta principal (títulos y cuerpo) */
  --ed-ink-soft:    #5f5a51;   /* tinta secundaria */
  --ed-ink-faint:   #8c867b;   /* etiquetas apagadas, notas */
  --ed-terra:       #a86a46;   /* terracota de etiquetas / enlaces / viñetas */
  --ed-terra-serif: #b07a4f;   /* terracota cálido para precios en serif */
  --ed-hair:        #c9c2b4;   /* filete / divisores */
  --ed-shadow:      0 1px 2px rgba(58,48,36,.05), 0 14px 34px rgba(58,48,36,.09);
  --ed-shadow-lift: 0 6px 16px rgba(58,48,36,.10), 0 22px 48px rgba(58,48,36,.14);
}

/* ---- 0 · Fondo mate opaco: tapa la hoja fija en las zonas claras -- */
body .validacion,
body .para-quien,
body .reencuadre,
body .como-trabajamos,
body .servicios,
body .diferenciador,
body .validacion-eco,
body .sobre-mi,
body .cta-final{
  background: var(--ed-bg);
  --text: var(--ed-ink);
  --text-muted: var(--ed-ink-soft);
  color: var(--ed-ink);
}
/* Alternancia suave para dar ritmo de páginas */
body .para-quien,
body .como-trabajamos,
body .validacion-eco{ background: var(--ed-bg-2); }

/* ---- 1 · Tipografía editorial: sin sombra blanca, tinta oscura ---- */
body .validacion .section-title,   body .validacion .section-description,
body .para-quien .section-title,   body .para-quien .section-description,
body .reencuadre .section-title,   body .reencuadre .reencuadre-intro,
body .como-trabajamos .section-title,
body .servicios .section-title,    body .servicios .section-description,
body .diferenciador .section-title,
body .validacion-eco .section-title, body .validacion-eco .section-description,
body .sobre-mi .section-title,
body .cta-final .section-title,    body .cta-final .section-description{
  text-shadow: none;
  color: var(--ed-ink);
}
body .validacion .section-description,
body .para-quien .section-description,
body .reencuadre .reencuadre-intro,
body .servicios .section-description,
body .validacion-eco .section-description,
body .cta-final .section-description{ color: var(--ed-ink-soft); }
body .servicios .section-description strong,
body .cta-final .section-description strong,
body .reencuadre .reencuadre-intro strong{ color: var(--ed-ink); }

/* Títulos serif elegantes (peso regular, no la negra), estilo revista */
body .validacion .section-title,
body .para-quien .section-title,
body .reencuadre .section-title,
body .como-trabajamos .section-title,
body .servicios .section-title,
body .diferenciador .section-title,
body .validacion-eco .section-title,
body .cta-final .section-title{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Eyebrow: Karla mayúscula, tracking amplio, terracota */
body .eyebrow{
  font-family: 'Karla', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ed-terra);
  margin: 0 0 1.1rem;
}

/* ---- 2 · Subtítulo de categoría: serif + filete corto centrado ---- */
body .servicios .category-title{
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--ed-ink);
  font-size: 1.7rem;
  line-height: 1.25;
  padding-bottom: 1.5rem;
  position: relative;
}
body .servicios .category-title::after{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  transform:translateX(-50%);
  width:60px; height:2px;
  background: var(--ed-terra);
  opacity:.65;
}

/* ---- 3 · Tarjetas de apoyo en lino crema (registro editorial) ----- */
body .para-quien-card,
body .paso-item,
body .testimonio-item,
body .reencuadre-column,
body .reencuadre-column.menos,
body .diferenciador-column,
body .diferenciador-column.no,
body .diferenciador-column.si,
body .cta-option{
  background: var(--ed-card);
  border: 1px solid var(--ed-border);
  box-shadow: var(--ed-shadow);
  border-radius: 6px;
  -webkit-mask: none;
  mask: none;
  filter: none;
}

/* La columna de cierre no es una tarjeta: texto plano, sin fondo ni borde */
body .validacion-cierre{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
body .reencuadre-column.menos,
body .diferenciador-column.no{ background: var(--ed-card-2); }

/* Texto e íconos dentro de tarjetas */
body .para-quien-card p,
body .paso-item p,
body .reencuadre-column li,
body .diferenciador-column li,
body .cta-description{ color: var(--ed-ink-soft); }
body .para-quien-card strong,
body .reencuadre-column li strong,
body .paso-item h3,
body .reencuadre-column h3,
body .diferenciador-column h3,
body .cta-option h3{ color: var(--ed-ink); }
body .para-quien-card .check-icon,
body .diferenciador-column.si li i,
body .reencuadre-column.mas li::before,
body .cta-icon,
body .cta-icon i,
body .paso-number{ color: var(--ed-terra); }
body .diferenciador-column.no h3{ color: var(--ed-ink-faint); }
body .diferenciador-column.no li{ color: var(--ed-ink-faint); }
body .diferenciador-column.no li i{ color: #b3ac9f; }

/* Números de paso: círculo terracota tenue */
body .paso-number{
  background: rgba(168,106,70,.10);
  color: var(--ed-terra);
}

/* Chips (ejemplos, opciones): rectángulos con borde, mayúscula tracked */
body .ejemplo-tag,
body .paso-tag{
  background: transparent;
  border: 1px solid var(--ed-hair);
  border-radius: 3px;
  color: var(--ed-ink-soft);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  font-weight: 600;
  padding: .5rem .8rem;
}

/* ---- 4 · Frases-tesis: statement centrado en serif, sin caja oscura */
body .reencuadre-statement,
body .validacion-eco-statement{
  background: transparent;
  border: none;
  box-shadow: none;
  filter: none;
  -webkit-mask: none;
  mask: none;
  border-radius: 0;
  padding: 1rem 0 0;
  color: var(--ed-ink);
}
body .reencuadre-statement{
  border-top: 1px solid var(--ed-hair);
  margin-top: 2.5rem;
  padding-top: 2.5rem;
}
body .reencuadre-statement p,
body .reencuadre-statement p:first-child,
body .validacion-eco-statement{
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ed-ink);
}
body .reencuadre-statement p:first-child{ font-size: 1.5rem; }
body .validacion-eco-statement{ font-size: 1.4rem; line-height: 1.5; }
body .reencuadre-statement strong,
body .validacion-eco-statement strong,
body .reencuadre-statement p:last-child strong{ color: var(--ed-terra); }

/* Testimonios: cursiva serif, comilla terracota */
body .testimonio-item p{ color: var(--ed-ink); }
body .testimonio-item strong{ color: var(--ed-ink); }
body .quote-icon{ color: var(--ed-terra); opacity:.7; }

/* ---- 5 · Cintas washi (las subes tú como PNG: washi-tape.png) ----- */
/* La cinta se controla con variables (--tape-*) para ganar por
   especificidad a la regla base ".servicio-image img { width:100% }"
   sin estirarse. img.washi-tape sube la especificidad lo necesario. */
body .servicio-image img.washi-tape,
body .sobre-mi-image img.washi-tape{
  position: absolute;
  top: var(--tape-top, -24px);
  left: 50%;
  width: var(--tape-w, 128px);
  height: auto;
  transform: translateX(-50%) rotate(var(--tape-rot, -3deg));
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 5px 9px rgba(40,34,26,.16));
}
/* Pequeñas variaciones de ángulo/tamaño para que no se vean clonadas */
.servicios-grid .servicio-card:nth-child(2n){ --tape-rot: 3deg; --tape-w: 116px; }
.servicios-grid .servicio-card:nth-child(3n){ --tape-rot: -1.5deg; --tape-w: 132px; }
body .sobre-mi-image{ --tape-w: 150px; --tape-rot: 2.5deg; --tape-top: -26px; }

/* ---- 6 · Tarjetas de servicio: papel editorial + cinta ------------ */
body .servicio-card{
  /* deshace la estampilla perforada y el panel oscuro */
  -webkit-mask: none;
  mask: none;
  filter: none;
  background: var(--ed-card);
  border: 1px solid var(--ed-border);
  border-radius: 8px;
  padding: 0;
  overflow: visible;                 /* deja asomar la cinta washi */
  box-shadow: var(--ed-shadow);
  min-height: 0;
  color: var(--ed-ink);
  --text: var(--ed-ink);
  --text-muted: var(--ed-ink-soft);
}
body .servicio-image{
  overflow: visible;                 /* la cinta sobresale por arriba */
  height: 240px;
  margin: 0;
  border-radius: 6px 6px 0 0;
}
body .servicio-destacado .servicio-image{ margin-top: 0; }
body .servicio-image img:not(.washi-tape){
  border-radius: 6px 6px 0 0;
}
body .servicio-content{ padding: 2rem 1.75rem 1.75rem; }

/* Título serif + eyebrow terracota (h4) */
body .servicio-card h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  color: var(--ed-ink);
  margin-bottom: .35rem;
}
body .servicio-card h4{
  font-family: 'Karla', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ed-terra);
  margin-bottom: 1.1rem;
}
body .servicio-card p{ color: var(--ed-ink-soft); }
body .servicio-card p strong{ color: var(--ed-ink); }

/* Viñetas redondas terracota (en vez de flechas) */
body .servicio-bullets li{
  color: var(--ed-ink-soft);
  padding-left: 1.5rem;
}
body .servicio-bullets li::before{
  content: "";
  position: absolute;
  left: 2px; top: .95em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ed-terra);
  font-weight: 400;
}

/* "Perfecto si": línea en cursiva con ícono, sin caja de color */
body .servicio-card .servicio-perfect{
  background: transparent;
  border-top: 1px solid var(--ed-hair);
  border-radius: 0;
  padding: 1rem 0 0;
  margin: 1.25rem 0 0;
  font-style: italic;
  color: var(--ed-ink-soft);
}
body .servicio-card .servicio-perfect strong{
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--ed-ink);
}
body .servicio-card .servicio-perfect i,
body .servicio-card .servicio-perfect svg{ color: var(--ed-terra); }

/* Precio en serif terracota + alternativa en cursiva apagada */
body .servicio-card .servicio-price{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.9rem;
  color: var(--ed-terra-serif);
  letter-spacing: -0.01em;
  margin-top: 1.5rem;
}
body .servicio-card .price-alt{
  font-family: 'Karla', system-ui, sans-serif;
  font-style: italic;
  color: var(--ed-ink-faint);
  font-size: .88rem;
}
body .servicio-card .servicio-note-small{ color: var(--ed-ink-faint); }

/* Botón → enlace de texto en mayúscula con filete superior (editorial) */
body .servicio-card .servicio-btn{
  background: transparent;
  color: var(--ed-terra);
  border-top: 1px solid var(--ed-hair);
  border-radius: 0;
  padding: 1.1rem 0 0;
  margin-top: 1.5rem;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
  box-shadow: none;
  width: auto;
  display: inline-block;
  position: relative;
}
body .servicio-card .servicio-btn::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 42px; height: 1px;
  background: var(--ed-terra);
  transition: width .3s ease;
}
body .servicio-card .servicio-btn:hover::after{ width: 100%; }

/* Chips de ejemplo dentro de servicios (mismos rectángulos editoriales) */
body .servicio-card .ejemplo-tag{
  background: transparent;
  border: 1px solid var(--ed-hair);
  color: var(--ed-ink-soft);
}

/* Destacado: sin cinta "Recomendado", solo un realce sobrio */
body .servicio-destacado{
  border: 1px solid var(--ed-terra);
  box-shadow: var(--ed-shadow-lift);
  transform: none;
}
body .servicio-destacado::before{ display: none; }

/* ---- 7 · Acordeón «Esto te suena» --------------------------------- */
body .validacion{ padding: 6rem 0; }
.validacion-editorial{
  display: grid;
  grid-template-columns: 0.95fr 1.15fr 0.9fr;
  gap: 3.5rem;
  align-items: start;
}
.validacion-intro .section-title{ margin-bottom: 1.5rem; }
.validacion-lead{
  color: var(--ed-ink-soft);
  font-size: 1.05rem;
  line-height: 1.7;
}
.accordion{ border-top: 1px solid var(--ed-hair); }
.accordion-item{ border-bottom: 1px solid var(--ed-hair); }
.accordion-trigger{
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0.25rem;
  text-align: left;
  font-family: 'Karla', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ed-ink);
  transition: color .25s ease;
}
.accordion-trigger:hover{ color: var(--ed-terra); }
.accordion-chevron{
  width: 18px; height: 18px;
  color: var(--ed-terra);
  flex-shrink: 0;
  transition: transform .3s ease;
}
.accordion-item.is-open .accordion-chevron{ transform: rotate(180deg); }
.accordion-panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.accordion-panel p{
  padding: 0 0.25rem 1.4rem;
  margin: 0;
  color: var(--ed-ink-soft);
  font-size: 1rem;
  line-height: 1.7;
}
.accordion-panel p strong{ color: var(--ed-ink); }
.validacion-cierre p{
  color: var(--ed-ink-soft);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.validacion-cierre p strong{ color: var(--ed-ink); }
.validacion-cierre .validacion-cierre-golpe{
  font-family: 'Karla', system-ui, -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ed-ink);
  margin-bottom: 0;
}
.validacion-cierre .validacion-cierre-golpe strong{
  font-family: 'Karla', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  color: var(--ed-ink);
}

/* ---- 8 · Sobre mí en claro editorial ------------------------------ */
body .sobre-mi{
  --text: var(--ed-ink);
  --text-muted: var(--ed-ink-soft);
  color: var(--ed-ink);
  padding: 7rem 0;
}
body .sobre-mi .section-eyebrow{ color: var(--ed-terra); }
body .sobre-mi .section-title{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ed-ink);
}
body .sobre-mi .section-title em{ font-style: italic; }
body .sobre-mi-text p{ color: var(--ed-ink-soft); text-shadow: none; }
body .sobre-mi-text strong{ color: var(--ed-ink); }
body .sobre-mi-image{
  position: relative;                /* ancla la cinta a la foto, no a la grilla */
  overflow: visible;
  border-radius: 6px;
  border: 1px solid var(--ed-border);
  box-shadow: var(--ed-shadow-lift);
}
body .sobre-mi-image img:not(.washi-tape){ border-radius: 6px; }
body .sobre-mi-highlight{
  background: transparent;
  border: none;
  border-left: 2px solid var(--ed-terra);
  border-radius: 0;
  padding: .35rem 0 .35rem 1.4rem;
}
body .sobre-mi-highlight p{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ed-ink);
  text-transform: none;
  letter-spacing: 0;
}
body .sobre-mi-highlight p strong{
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ed-ink);
}
body .sobre-mi .sobre-mi-firma strong{ color: var(--ed-ink); }

/* ---- 9 · CTA final editorial -------------------------------------- */
body .cta-option{
  border: 1px solid var(--ed-border);
  border-radius: 6px;
}
body .cta-option h3{ font-family: var(--font-display); font-weight: 500; }
body .cta-price{ color: var(--ed-terra-serif); font-family: var(--font-display); font-size: 1.15rem; }
body .cta-destacada{
  background: var(--ed-card);
  border: 1px solid var(--ed-terra);
  box-shadow: var(--ed-shadow-lift);
}
body .cta-destacada h3{ color: var(--ed-ink); }
body .cta-destacada .cta-price{ color: var(--ed-terra-serif); }
body .cta-destacada .cta-description{ color: var(--ed-ink-soft); }
body .cta-destacada .cta-icon,
body .cta-destacada .cta-icon i{ color: var(--ed-terra); }

/* ---- 10 · Decoraciones PNG: se atenúan sobre el papel claro ------- */
body .reencuadre .deco-plant{ opacity: .5; mix-blend-mode: multiply; }

/* ---- 11 · Responsivo editorial ------------------------------------ */
@media (max-width: 900px){
  .validacion-editorial{ grid-template-columns: 1fr; gap: 2.25rem; }
}
@media (max-width: 768px){
  body .validacion,
  body .sobre-mi{ padding: 4rem 0; }
  body .servicio-card h3{ font-size: 1.5rem; }
  body .servicio-image{ height: 220px; }
  body .servicio-image,
  body .sobre-mi-image{ --tape-w: 108px; --tape-top: -18px; }
}

/* =========================================================
   CAPA EDITORIAL · Testimonios en fila de 4 + cierre grande
   (ajuste pedido: refleja el mockup de "Lo que se repite")
========================================================= */
body .validacion-eco .section-header{ margin-bottom: 3.5rem; }

body .testimonios-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1040px;                 /* mismo ancho que el bloque "Lo que NO / SÍ" */
  margin-left: auto;
  margin-right: auto;
  gap: 1.5rem;
  margin-top: 0;
}
body .testimonio-item{
  background: #e4e0d8;                /* tarjeta un punto más clara que el fondo */
  border: 1px solid var(--ed-border);
  box-shadow: var(--ed-shadow);
  border-radius: 6px;
  padding: 2.25rem 1.75rem;
}
body .testimonio-item .quote-icon{
  position: static;                  /* la comilla fluye arriba, no flota */
  width: 30px; height: 30px;
  color: var(--ed-terra);
  opacity: .85;
  margin: 0 0 1.25rem;
}
body .testimonio-item p{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ed-ink);
}
body .testimonio-item p strong{
  font-weight: 700;
  color: var(--ed-terra);
}

/* Cierre («el último pasito»): serif grande, centrado, remate terracota */
body .validacion-eco-statement{
  max-width: 780px;
  margin: 4.5rem auto 0;
  font-size: 1.8rem;
  line-height: 1.4;
  text-align: center;
  color: var(--ed-ink);
}
body .validacion-eco-statement strong{
  display: inline-block;
  margin-top: .4rem;
  font-weight: 700;
  color: var(--ed-terra);
}

@media (max-width: 900px){
  body .testimonios-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  body .validacion-eco-statement{ font-size: 1.5rem; }
}
@media (max-width: 560px){
  body .testimonios-grid{ grid-template-columns: 1fr; }
  body .validacion-eco-statement{ font-size: 1.35rem; }
}

/* =========================================================
   CAPA EDITORIAL · "¿Cómo funciona trabajar conmigo?"
   Consistente con el resto: numerales serif en aro terracota,
   títulos serif ligeros y separadores de filete.
========================================================= */
body .como-trabajamos .section-header{ margin-bottom: 3.5rem; }
body .pasos-grid{ gap: 1.75rem; }
body .paso-item{ padding: 2.5rem 2rem; }
body .paso-number{
  width: 58px; height: 58px;
  background: transparent;
  border: 1px solid var(--ed-terra);
  color: var(--ed-terra);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  margin-bottom: 1.5rem;
}
body .paso-item h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  letter-spacing: -0.01em;
  color: var(--ed-ink);
  margin-bottom: 1rem;
}
body .paso-item p{ color: var(--ed-ink-soft); }
body .paso-item p strong{ color: var(--ed-ink); }
body .paso-note{
  border-top: 1px solid var(--ed-hair);
  color: var(--ed-ink-soft);
}

/* =========================================================
   CAPA EDITORIAL · Bloque "Sobre mí" (cita + firma)
   Cita destacada en Karla cursiva (no serif) con filete terracota,
   y la firma en cursiva manuscrita (Cedarville) en terracota.
========================================================= */
body .sobre-mi-highlight{
  border-left: 2px solid var(--ed-terra);
  padding: .35rem 0 .35rem 1.6rem;
  margin: 2rem 0;
}
body .sobre-mi-highlight p{
  font-family: 'Karla', system-ui, sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--ed-ink);
  text-transform: none;
  letter-spacing: 0;
}
body .sobre-mi-highlight p strong{
  font-family: 'Karla', system-ui, sans-serif;
  font-style: italic;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ed-ink);
}

/* Firma manuscrita en terracota */
body .sobre-mi .sobre-mi-firma{
  font-family: var(--font-accent);   /* Cedarville Cursive */
  color: var(--ed-terra);
  font-size: 1.7rem;
  line-height: 1.75;
  margin-top: 2.25rem;
}
body .sobre-mi .sobre-mi-firma strong{
  font-family: var(--font-accent);
  font-weight: 400;
  color: var(--ed-terra);
}

/* =========================================================
   CAPA EDITORIAL · Esquinas rectas (cards más cuadradas)
   Pedido: bordes más filosos en todas las tarjetas.
========================================================= */
body .para-quien-card,
body .paso-item,
body .testimonio-item,
body .reencuadre-column,
body .reencuadre-column.menos,
body .diferenciador-column,
body .diferenciador-column.no,
body .diferenciador-column.si,
body .cta-option,
body .cta-destacada,
body .validacion-cierre,
body .servicio-card,
body .servicio-image,
body .servicio-image img:not(.washi-tape),
body .sobre-mi-image,
body .sobre-mi-image img:not(.washi-tape){
  border-radius: 0;
}
/* Chips también a escuadra */
body .ejemplo-tag,
body .paso-tag,
body .servicio-card .ejemplo-tag{ border-radius: 0; }

/* ============================================================
   SERVICIOS · formato calcado del landing (caracolestudiolanding)
   Conserva las cintas washi actuales · sin la etiqueta "Empieza aquí".
   (capa final · reversible: borra este bloque para revertir)
   ============================================================ */
body .servicios .servicios-category { margin-bottom: 4.5rem; }

/* Título de categoría: serif centrado + filete terracota corto debajo */
body .servicios .category-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  text-align: center;
  color: var(--ed-ink);
  padding-bottom: 0;
  margin-bottom: 2.6rem;
  text-shadow: none;
}
body .servicios .category-title::after {
  display: none;
}

/* Rejilla fluida (no flex centrado) */
body .servicios .servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.6rem 2.2rem;
}

/* Tarjeta: papel claro, borde sutil, esquinas 3px, sombra suave */
body .servicios .servicio-card {
  display: flex;
  flex-direction: column;
  background: #e6e4dd;
  border: 1px solid rgba(46, 46, 46, 0.08);
  border-radius: 3px;
  overflow: visible;
  box-shadow: 0 18px 45px -28px rgba(18, 18, 39, 0.45);
  padding: 0;
}
body .servicios .servicio-card:hover { transform: translateY(-4px); }

/* Imagen embutida con margen + proporción 4/3 (la cinta washi asoma) */
body .servicios .servicio-image {
  position: relative;
  height: auto;
  margin: 14px 14px 0;
  border-radius: 0;
  overflow: visible;
}
body .servicios .servicio-image img:not(.washi-tape) {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

body .servicios .servicio-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.8rem 1.7rem 2rem;
}

/* Jerarquía tipográfica */
body .servicios .servicio-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  margin-bottom: 0.35rem;
  color: var(--ed-ink);
  text-shadow: none;
}
body .servicios .servicio-card h4 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 1rem;
}
body .servicios .servicio-content p { font-size: 0.96rem; color: var(--ed-ink-soft); margin-bottom: 0.9rem; }
body .servicios .servicio-content p strong { color: var(--ed-ink); }

/* Viñetas con punto terracota */
body .servicios .servicio-bullets li {
  padding-left: 1.3rem;
  font-size: 0.94rem;
  color: var(--ed-ink-soft);
}
body .servicios .servicio-bullets li::before {
  background: var(--primary);
  width: 6px;
  height: 6px;
  top: 0.62em;
}

/* Chips de ejemplo: contorno fino, sin relleno */
body .servicios .ejemplo-tag {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-ink-soft);
  background: transparent;
  border: 1px solid rgba(173, 106, 75, 0.38);
  border-radius: 2px;
  padding: 0.3rem 0.6rem;
}

/* "Perfecto si": itálica con icono terracota alineado arriba */
body .servicios .servicio-card .servicio-perfect {
  font-size: 0.9rem;
  font-style: italic;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: transparent;
  padding: 0;
  margin: 1rem 0;
}
body .servicios .servicio-card .servicio-perfect i,
body .servicios .servicio-card .servicio-perfect svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 4px;
}

/* Precio serif terracota + nota alterna en itálica */
body .servicios .servicio-price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--primary);
  margin: 0.6rem 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
body .servicios .price-alt {
  font-family: var(--font-family);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ed-ink-soft);
  font-style: italic;
}

/* Botón → enlace en mayúscula con subrayado inferior */
body .servicios .servicio-card .servicio-btn {
  margin-top: auto;
  margin-bottom: 0;
  align-self: flex-start;
  width: auto;
  display: inline-block;
  background: transparent;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-bottom: 1px solid rgba(173, 106, 75, 0.38);
  border-radius: 0;
  padding: 0 0 5px;
  text-align: left;
}
body .servicios .servicio-card .servicio-btn::after { display: none; }
body .servicios .servicio-card .servicio-btn:hover {
  color: var(--secondary);
  border-bottom-color: var(--primary);
}
body .servicios .servicio-note-small {
  font-size: 0.76rem;
  font-style: italic;
  margin-top: 0.9rem;
  margin-bottom: 0;
  opacity: 1;
  color: var(--ed-ink-soft);
}

/* Destacado: solo borde terracota, sin etiqueta ("Empieza aquí"/"Recomendado") */
body .servicios .servicio-destacado {
  border-color: rgba(173, 106, 75, 0.5);
  box-shadow: 0 18px 45px -28px rgba(18, 18, 39, 0.45);
  transform: none;
}
body .servicios .servicio-destacado .servicio-image { margin-top: 14px; }
body .servicios .servicio-destacado::before,
body .servicios .servicio-destacado .servicio-image::before {
  content: none;
  display: none;
}

/* =========================================================
   CAPA EDITORIAL · Columnas al aire (mockup "respirar")
   Reencuadre (Menos/Más) y Diferenciador (Lo que NO/SÍ) dejan de ser
   tarjetas: dos columnas de texto respirado, con título serif centrado
   en terracota, sin cajas, bordes, sombras ni íconos. Aire y tipografía.
   (capa final · reversible: borra este bloque para volver a las tarjetas)
========================================================= */

/* --- Contenedor: más aire entre columnas y respiración vertical ---- */
body .reencuadre-columns,
body .diferenciador-grid {
  gap: clamp(3rem, 6vw, 6rem);
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
body .reencuadre-columns { margin-bottom: 0; }

/* --- Columnas: sin caja. Solo texto sobre el papel ----------------- */
body .reencuadre-column,
body .reencuadre-column.menos,
body .reencuadre-column.mas,
body .diferenciador-column,
body .diferenciador-column.no,
body .diferenciador-column.si {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0.5rem 0.25rem;
  text-align: left;
}

/* --- Título de columna: serif centrado, terracota, con aire -------- */
body .reencuadre-column h3,
body .diferenciador-column h3,
body .diferenciador-column.no h3,
body .diferenciador-column.si h3 {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  color: var(--ed-terra-serif);
  margin: 0 auto 2rem;
  padding-bottom: 1.25rem;
  position: relative;
}
body .reencuadre-column h3::after,
body .diferenciador-column h3::after {
  display: none;
}

/* --- Fuera los íconos lucide: el aire hace el contraste ------------ */
body .reencuadre-column h3 i,
body .diferenciador-column li i {
  display: none;
}

/* --- Ítems: líneas de texto respiradas, sin viñeta ni caja --------- */
body .reencuadre-column ul,
body .diferenciador-column ul {
  margin: 0;
  padding: 0;
}
body .reencuadre-column li,
body .diferenciador-column li {
  display: block;
  padding: 0;
  margin: 0 0 1.4rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ed-ink-soft);
}
body .reencuadre-column li:last-child,
body .diferenciador-column li:last-child {
  margin-bottom: 0;
}
body .reencuadre-column li::before {
  content: none;
}
body .reencuadre-column li strong,
body .diferenciador-column li strong {
  color: var(--ed-ink);
  font-weight: 600;
}

/* La columna que "se suelta" queda un punto más tenue (contraste sutil) */
body .diferenciador-column.no li,
body .reencuadre-column.menos li {
  color: var(--ed-ink-faint);
}
body .diferenciador-column.no li strong,
body .reencuadre-column.menos li strong {
  color: var(--ed-ink-soft);
}

@media (max-width: 768px) {
  body .reencuadre-column h3,
  body .diferenciador-column h3 { margin-bottom: 1.5rem; }
  body .reencuadre-column li,
  body .diferenciador-column li { margin-bottom: 1.1rem; }
}

/* =========================================================
   CAPA EDITORIAL · "Para quién" y "Cómo trabajamos" al aire
   Mismo registro que Reencuadre/Diferenciador: se quitan las tarjetas
   (fondo, borde, sombra) y los íconos. "Para quién" pasa a una columna
   estrecha centrada de frases respiradas; "Cómo trabajamos" deja los
   tres pasos flotando sobre el papel, centrados, con el aro terracota.
   (capa final · reversible: borra este bloque para volver a las tarjetas)
========================================================= */

/* ---- Para quién: columna única centrada, texto al aire ------------ */
body .para-quien-grid {
  grid-template-columns: 1fr;
  max-width: 680px;
  margin: 3rem auto 0;
  gap: 2.4rem;
}
body .para-quien-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  display: block;
  padding: 0;
  text-align: left;
}
body .para-quien-card .check-icon { display: none; }
body .para-quien-card p {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--ed-ink-soft);
  margin: 0;
}
body .para-quien-card strong { color: var(--ed-ink); font-weight: 600; }

/* ---- Cómo trabajamos: pasos sin caja, centrados ------------------- */
body .como-trabajamos .pasos-grid {
  gap: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
body .como-trabajamos .paso-item {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0.5rem 0.5rem;
  text-align: center;
}
body .como-trabajamos .paso-item h3,
body .como-trabajamos .paso-item p { text-align: center; }
body .como-trabajamos .paso-options { justify-content: center; }
body .como-trabajamos .paso-note {
  border-top: none;
  padding-top: 0;
  margin-top: 1.4rem;
  text-align: center;
}

@media (max-width: 768px) {
  body .para-quien-grid { gap: 1.9rem; }
  body .como-trabajamos .paso-item { padding: 0; }
}

/* =========================================================
   CAPA EDITORIAL · CTA final "Estás a un pasito de caracol"
   Las dos opciones dejan de ser tarjetas rellenas y pasan a filete al
   aire: fondo del papel, borde fino, sin íconos. La opción destacada
   (auditoría) lleva filete terracota y un lavado cálido apenas visible
   para seguir siendo la acción principal. Hover con leve elevación.
   (capa final · reversible: borra este bloque para volver a las tarjetas)
========================================================= */
body .cta-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
body .cta-option,
body .cta-destacada {
  background: transparent;
  border: 1px solid var(--ed-hair);
  box-shadow: none;
  padding: 2.75rem 2rem;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
body .cta-option .cta-icon { display: none; }
body .cta-option h3 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
}
body .cta-price {
  font-size: 1.2rem;
  margin-bottom: 0.35rem;
}
/* Destacada: filete terracota + lavado cálido apenas perceptible */
body .cta-destacada {
  border-color: var(--ed-terra);
  background: rgba(168, 106, 70, 0.045);
}
/* Afordancia al pasar: se levanta y el filete se aviva */
body .cta-option:hover,
body .cta-option:focus-visible {
  border-color: var(--ed-terra);
  background: rgba(168, 106, 70, 0.05);
  transform: translateY(-3px);
}
body .cta-destacada:hover,
body .cta-destacada:focus-visible {
  background: rgba(168, 106, 70, 0.09);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  body .cta-option:hover,
  body .cta-destacada:hover { transform: none; }
}

/* =========================================================
   CAPA EDITORIAL · Ajustes finales
   1) Botones del hero: caja cuadrada, versalita espaciada (registro editorial)
   2) Nota de los "Paquetes Caracol": un punto más grande y legible
   3) "Lo que NO / Lo que SÍ": vuelve a tarjeta, con el mismo registro
      que la zona de testimonios (lino, filete, serif itálica, terracota)
   (capa final · reversible: borra este bloque para volver al estado anterior)
========================================================= */

/* ---- 1 · Botones del hero: cuadrados y en versalita -------------- */
body .hero-buttons { gap: 0.85rem; }
body .hero-buttons .btn {
  border-radius: 2px;
  padding: 1.15rem 2rem;
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  gap: 0.7rem;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
body .hero-buttons .btn-primary {
  border: 1px solid var(--primary);
}
body .hero-buttons .btn-secondary {
  border: 1px solid var(--primary);
}
body .hero-buttons .btn-icon { width: 14px; height: 14px; }

/* ---- 2 · Notas de servicios en el registro editorial ------------- */
body .servicios .servicio-note-small {
  font-size: 0.92rem;
  line-height: 1.6;
  margin-top: 1.05rem;
}

/* Bloque "¿Por dónde parto?": orientación, no letra chica */
body .servicios .servicios-orientacion {
  color: var(--ed-ink-soft);
  font-size: 1.02rem;
  line-height: 1.75;
}
body .servicios .servicios-orientacion h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--ed-ink);
  margin-bottom: 1.1rem;
}
body .servicios .servicios-orientacion p {
  color: var(--ed-ink-soft);
  font-size: inherit;
  margin-bottom: 0.85rem;
}
body .servicios .servicios-orientacion p:last-child { margin-bottom: 0; }

/* ---- 3 · Diferenciador con el registro de los testimonios -------- */
body .diferenciador-grid {
  gap: 1.5rem;
  max-width: 1040px;
}
body .diferenciador-column,
body .diferenciador-column.no,
body .diferenciador-column.si {
  background: #e4e0d8;                 /* mismo lino de las tarjetas de testimonio */
  border: 1px solid var(--ed-border);
  box-shadow: var(--ed-shadow);
  border-radius: 6px;
  padding: 2.5rem 2rem;
  text-align: left;
}
body .diferenciador-column.no {
  background: var(--ed-card-2);        /* la que "se suelta", un punto más apagada */
}

/* Título de columna: versalita terracota, como las etiquetas editoriales */
body .diferenciador-column h3,
body .diferenciador-column.no h3,
body .diferenciador-column.si h3 {
  font-family: var(--font-family);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ed-terra);
  margin: 0 0 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ed-hair);
}
body .diferenciador-column.no h3 { color: var(--ed-ink-faint); }

/* Ítems: serif itálica, como las citas de "Lo que se repite" */
body .diferenciador-column li {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ed-ink);
  margin: 0;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(201, 194, 180, 0.5);
}
body .diferenciador-column li:first-child { padding-top: 0; }
body .diferenciador-column li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
body .diferenciador-column li strong {
  font-weight: 700;
  color: var(--ed-terra);
}
body .diferenciador-column.no li { color: var(--ed-ink-soft); }
body .diferenciador-column.no li strong { color: var(--ed-ink-faint); }

@media (max-width: 768px) {
  body .diferenciador-column,
  body .diferenciador-column.no,
  body .diferenciador-column.si { padding: 2rem 1.5rem; }
  body .diferenciador-column li { font-size: 1.05rem; }
}

/* =========================================================
   página diagnóstico
   Solo lo que no tenía clase equivalente en el sistema:
   anchos de lectura, la lista "no es para ti" a una columna
   y los cuatro pasos en una sola fila.
========================================================= */

/* Nota bajo el titular del hero: mismo registro que las notas de
   servicios, pero centrada y sin la opacidad que la apaga de más. */
.diagnostico-hero-nota {
  text-align: center;
  opacity: 1;
  margin: -1.5rem 0 2rem;
  font-size: 0.95rem;
}

/* Columna de lectura para las listas sueltas (sin tarjeta). */
.diagnostico-lista {
  max-width: 46rem;
  margin: 0 auto;
  text-align: left;
}

/* "Esto no es para ti si" reutiliza la columna NO de la home, pero
   aquí va sola: no tiene pareja con la que compartir la fila. */
.diagnostico-grid-single {
  grid-template-columns: 1fr;
  max-width: 46rem;
  margin: 0 auto;
}

/* Enlace dentro de la columna NO: terracota subrayado fino. */
.diagnostico-link {
  color: var(--ed-terra);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* Cuatro pasos caben en una fila; el mínimo de .pasos-grid (300px)
   los partía en 3 + 1. */
.diagnostico-pasos {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* El destacado de "Qué recibes" respira respecto de la lista. */
.diagnostico-destacado {
  margin-top: 2rem;
}

/* Fuera de las tarjetas de servicio, estas viñetas son cuerpo de
   lectura: recuperan el tamaño que sí tienen en el resto de la página. */
body .diagnostico-lista .servicio-bullets li,
body .diagnostico-lista.servicio-bullets li {
  font-size: 1.1rem;
  line-height: 1.7;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
body .diagnostico-lista .servicio-bullets li::before,
body .diagnostico-lista.servicio-bullets li::before {
  top: 1.1em;
}

/* La frase-corazón de «Sobre mí» vuelve al serif en cursiva (Linux Libertine).
   Solo esa sección: el destacado del diagnóstico se queda en Karla. */
body .sobre-mi .sobre-mi-highlight p,
body .sobre-mi .sobre-mi-highlight p strong{
  font-family: var(--font-display);
  font-style: italic;
}
body .sobre-mi .sobre-mi-highlight p{ font-weight: 400; font-size: 1.45rem; line-height: 1.5; }
body .sobre-mi .sobre-mi-highlight p strong{ font-weight: 700; }

@media (max-width: 768px){
  body .sobre-mi .sobre-mi-highlight p{ font-size: 1.25rem; }
}