/* ==========================================================================
   Criterio.Capital — Home v4 / cc.4 (solo se carga en la portada)
   Paleta: navy #122036 · dorado #CDA862 · crema #F0ECE2 · enlace #7A5E28
   Titulares: IBM Plex Serif (si está activa en Ghost > Design > Typography),
   con respaldo EB Garamond (incluida en el tema). Texto: Inter (del tema).
   Sin fuentes, scripts ni embebidos de terceros.
   ========================================================================== */

.home-template {
    --cc-navy: #122036;
    --cc-navy-2: #1a2c47;
    --cc-gold: #cda862;
    --cc-gold-dark: #7a5e28;
    --cc-cream: #f0ece2;
    --cc-cream-2: #f7f5ef;
    --cc-ink: #16202e;
    --cc-muted: #4f5868;          /* 7,2:1 sobre blanco; 6,1:1 sobre crema */
    --cc-on-navy: #f0ece2;
    --cc-on-navy-muted: #c9cfd9;  /* 10,4:1 sobre navy */
    --cc-line: rgb(18 32 54 / 0.14);
    --cc-serif: "IBM Plex Serif", "EB Garamond", Georgia, "Times New Roman", serif;
    --cc-sans: var(--gh-font-body, var(--font-sans));
    --cc-wrap: 1120px;
    --cc-gap: clamp(20px, 4vw, 40px);
    --cc-section-y: clamp(64px, 9vw, 112px);
}

.cc-home {
    font-family: var(--cc-sans);
    color: var(--cc-ink);
    background: #fff;
}

.cc-wrap {
    width: 100%;
    max-width: calc(var(--cc-wrap) + 2 * var(--cc-gap));
    margin-inline: auto;
    padding-inline: var(--cc-gap);
}

.cc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.cc-home a:focus-visible,
.cc-home button:focus-visible,
.cc-home input:focus-visible,
.home-template .gh-navigation a:focus-visible {
    outline: 3px solid var(--cc-gold);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- Navegación (solo en la home): navy para fundirse con la cabecera ---------- */

.home-template .gh-navigation {
    --background-color: var(--cc-navy); /* también cubre acciones y menú móvil abierto */
    --color-darker-gray: #fff;
    --color-secondary-text: rgb(255 255 255 / 0.72);
    --color-border: rgb(255 255 255 / 0.14);
    background-color: var(--cc-navy);
    color: var(--cc-on-navy);
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

.home-template .gh-navigation .gh-navigation-logo {
    font-family: var(--cc-sans);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-template .gh-navigation .gh-navigation-menu a {
    color: var(--cc-on-navy-muted);
}

.home-template .gh-navigation .gh-navigation-menu a:hover,
.home-template .gh-navigation .nav-current a {
    color: #fff;
    opacity: 1;
}

.home-template .gh-navigation .gh-button {
    color: var(--cc-navy);
    background-color: var(--cc-gold);
    border-radius: 6px;
}

/* ---------- Tipografía común ---------- */

.cc-eyebrow {
    margin: 0 0 20px;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--cc-gold-dark);
}

.cc-eyebrow--gold { color: var(--cc-gold); } /* 7,3:1 sobre navy */

.cc-h2 {
    margin: 0;
    font-family: var(--cc-serif);
    font-size: clamp(2.8rem, 2rem + 1.6vw, 4rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--cc-navy);
}

.cc-section { padding-block: var(--cc-section-y); }

.cc-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 48px;
    margin-bottom: clamp(32px, 4vw, 48px);
}

.cc-section-intro {
    max-width: 440px;
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.6;
    color: var(--cc-muted);
}

.cc-link-arrow {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--cc-gold-dark); /* 6,1:1 sobre blanco; 5,2:1 sobre crema */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.cc-link-arrow:hover { color: var(--cc-navy); }

/* ---------- a) Cabecera ---------- */

.cc-hero {
    position: relative;
    overflow-x: clip;               /* cc.5: la foto sobresale del contenedor hacia la derecha */
    color: var(--cc-on-navy);
    background: var(--cc-navy);
    background-image: radial-gradient(120% 90% at 100% 0%, var(--cc-navy-2) 0%, var(--cc-navy) 60%);
}

.cc-hero-inner {
    padding-top: clamp(64px, 10vw, 128px);
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px clamp(24px, 3vw, 48px);
    align-items: start;
}

.cc-hero-main {
    align-self: start;
    padding-bottom: clamp(64px, 9vw, 112px);
}

/* cc.5: foto a la derecha, cabeza a la altura del titular, bordes desvanecidos.
   Ancho máx. 500 px = tamaño del original (no se escala de más); zona visible ~420 px. */
.cc-hero-photo {
    position: relative;
    justify-self: end;
    width: min(calc(100% + 40px), 500px);
    margin: 0 -40px clamp(48px, 6vw, 80px) 0;
}

.cc-hero-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 24%, #000 80%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 10%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0%, #000 24%, #000 80%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 10%, #000 80%, transparent 100%);
    mask-composite: intersect;
}

/* Pie de foto debajo del recorte, sobre navy liso (no pisa brazos ni manos) */
/* cc.18 (Félix): sin rayita dorada; nombre y título alineados a la derecha de la foto */
.cc-hero-caption {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-top: 4px;
    padding-right: 20%;             /* acaba donde la foto aún es opaca (máscara: opaca hasta el 80 %) */
    text-align: right;
    line-height: 1.3;
}

.cc-hero-caption-name {
    font-family: var(--cc-serif);
    font-size: 1.9rem;
    font-weight: 500;
    color: var(--cc-cream);
}

.cc-hero-caption-role {
    font-size: 1.4rem;              /* 14 px */
    letter-spacing: 0.02em;
    color: var(--cc-cream);         /* #f0ece2 */
}

/* cc.17: franja «Lo último / Qué publico» eliminada (CSS borrado). */

.cc-hero-title {
    max-width: 14ch;
    margin: 0;
    font-family: var(--cc-serif);
    font-size: clamp(4rem, 2.4rem + 4.2vw, 7.2rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
}

.cc-hero-lead {
    max-width: 34em;
    margin: 28px 0 0;
    font-size: clamp(1.8rem, 1.6rem + 0.4vw, 2.1rem);
    line-height: 1.55;
    color: var(--cc-on-navy-muted);
}

.cc-hero-member {
    margin: 36px 0 0;
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--cc-gold);
}

.cc-rule {
    display: block;
    width: 72px;
    height: 3px;
    margin-top: clamp(48px, 6vw, 72px);
    background: var(--cc-gold);
}

/* Formulario de alta */
.cc-form {
    max-width: 560px;
    margin-top: 36px;
}

.cc-form-row {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: #fff;
    border-radius: 8px;
}

.cc-form-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    font: inherit;
    font-size: 1.6rem;
    color: var(--cc-ink);
    background: transparent;
    border: 0;
    outline: none;
}

.cc-form-input::placeholder { color: #6b7280; }

.cc-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 22px;
    font: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.cc-btn--gold {
    color: var(--cc-navy);              /* 7,3:1 */
    background: var(--cc-gold);
}

.cc-btn--gold:hover { background: #d8b878; }

.cc-btn-loading,
.cc-form-success,
.cc-form-error { display: none; }

.cc-form.loading .cc-btn-default { display: none; }
.cc-form.loading .cc-btn-loading { display: inline; }
.cc-form.success .cc-form-row { display: none; }

.cc-form.success .cc-form-success {
    display: block;
    margin: 0;
    padding: 14px 16px;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--cc-navy);
    background: var(--cc-cream);
    border-left: 3px solid var(--cc-gold);
    border-radius: 6px;
}

.cc-form.error .cc-form-error {
    display: block;
    margin: 10px 0 0;
    font-size: 1.4rem;
    color: #ffd2c4;
}

.cc-consent {
    margin: 14px 0 0;
    font-size: 1.3rem;
    line-height: 1.55;
    color: var(--cc-on-navy-muted);
}

.cc-consent a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- b) Tres secciones ---------- */

.cc-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cc-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
    padding: clamp(24px, 3vw, 36px);
    color: var(--cc-ink);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-top: 3px solid var(--cc-gold);
    border-radius: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -18px rgb(18 32 54 / 0.45);
}

.cc-card-kicker {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cc-gold-dark);
}

.cc-card-title {
    margin: 0;
    font-family: var(--cc-serif);
    font-size: clamp(2.2rem, 1.9rem + 0.6vw, 2.6rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--cc-navy);
}

.cc-card-text {
    flex-grow: 1;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--cc-muted);
}

.cc-card-more {
    margin-top: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cc-gold-dark);
}

.cc-card--navy {
    color: var(--cc-on-navy);
    background: var(--cc-navy);
    border-color: var(--cc-navy);
    border-top-color: var(--cc-gold);
}

.cc-card--navy .cc-card-kicker,
.cc-card--navy .cc-card-more { color: var(--cc-gold); }
.cc-card--navy .cc-card-title { color: #fff; }
.cc-card--navy .cc-card-text { color: var(--cc-on-navy-muted); }

/* ---------- c) Últimas publicaciones ---------- */

.cc-latest { background: var(--cc-cream); }

.cc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cc-chip {
    padding: 7px 14px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--cc-navy);
    text-decoration: none;
    background: transparent;
    border: 1px solid rgb(18 32 54 / 0.28);
    border-radius: 100px;
}

.cc-chip:hover { border-color: var(--cc-navy); }

.cc-chip.is-active {
    color: #fff;
    background: var(--cc-navy);
    border-color: var(--cc-navy);
}

.cc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--cc-line);
}

.cc-item { border-bottom: 1px solid var(--cc-line); }

.cc-item-link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "meta arrow" "title arrow";
    column-gap: 24px;
    row-gap: 6px;
    align-items: center;
    padding: 22px 4px;
    color: inherit;
    text-decoration: none;
}

.cc-item-meta {
    grid-area: meta;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--cc-muted);
}

.cc-item-sep { margin-inline: 8px; }
.cc-item-tag { color: var(--cc-gold-dark); font-weight: 600; }

.cc-item-title {
    grid-area: title;
    margin: 0;
    font-family: var(--cc-serif);
    font-size: clamp(1.9rem, 1.7rem + 0.5vw, 2.3rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--cc-navy);
}

.cc-item-arrow {
    grid-area: arrow;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 1.6rem;
    color: var(--cc-navy);
    border: 1px solid rgb(18 32 54 / 0.35);
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cc-item-link:hover .cc-item-title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.cc-item-link:hover .cc-item-arrow {
    color: #fff;
    background: var(--cc-navy);
}

.cc-empty {
    padding: 32px 4px;
    font-size: 1.6rem;
    color: var(--cc-muted);
    border-bottom: 1px solid var(--cc-line);
}

.cc-empty p { margin: 0; }

.cc-empty-title {
    margin-bottom: 6px !important;
    font-family: var(--cc-serif);
    font-size: 2.2rem;
    color: var(--cc-navy);
}

.cc-more { margin: 32px 0 0; }

/* ---------- c2) Método (cc.3): franja navy a todo el ancho ---------- */

.cc-method {
    color: var(--cc-on-navy);
    background: var(--cc-navy);
}

.cc-method-head {
    max-width: 760px;
    margin-bottom: clamp(36px, 5vw, 56px);
}

.cc-method-title {
    color: #fff;
    text-wrap: balance;
}

.cc-method-title::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin-top: 24px;
    background: var(--cc-gold);
}

.cc-method-lead {
    margin: 24px 0 0;
    font-size: clamp(1.8rem, 1.6rem + 0.4vw, 2.1rem);
    line-height: 1.55;
    color: var(--cc-on-navy);       /* crema: 14,6:1 sobre navy */
}

.cc-principles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(32px, 6vw, 80px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cc-principle {
    padding: 28px 0 32px;
    border-top: 1px solid var(--cc-gold);   /* filete dorado */
}

.cc-principle-num {
    display: block;
    margin-bottom: 10px;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--cc-gold);          /* 7,3:1 sobre navy */
}

.cc-principle-title {
    margin: 0 0 10px;
    font-family: var(--cc-serif);
    font-size: clamp(2.2rem, 1.9rem + 0.6vw, 2.6rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--cc-cream);
}

.cc-principle-text {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.65;
    color: var(--cc-on-navy);
}

.cc-method-note {
    max-width: 720px;
    margin: clamp(24px, 3vw, 36px) 0 0;
    padding-top: 20px;
    font-size: 1.3rem;
    line-height: 1.55;
    color: var(--cc-on-navy-muted);  /* 10,4:1 sobre navy */
    border-top: 1px solid rgb(205 168 98 / 0.4);
}

/* ---------- d) Sobre mí ---------- */

.cc-about-inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 32px clamp(32px, 6vw, 96px);
    align-items: start;
}

.cc-about-head {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cc-about-id {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    align-items: center;
}

.cc-about-person {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.cc-about-name {
    font-family: var(--cc-serif);
    font-size: 2rem;
    font-weight: 600;
    color: var(--cc-navy);
}

.cc-about-role {
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--cc-muted);         /* 7,2:1 sobre blanco */
}

.cc-about-place {
    font-family: var(--cc-sans);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--cc-muted);
}

.cc-about-short {
    margin: 0;
    max-width: 40em;
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--cc-muted);         /* 7,2:1 sobre blanco */
}

.cc-about-photo { margin: 0; }
.cc-about-photo[hidden] { display: none; }

/* cc.5: avatar pequeño redondo junto al nombre (estilo firma); la foto grande va en la cabecera */
.cc-about-photo img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--cc-gold);
}

.cc-about-body {
    padding-left: clamp(0px, 3vw, 32px);
    border-left: 3px solid var(--cc-gold);
}

.cc-about-body p { margin: 0; }

.cc-about-bio {
    margin-bottom: 20px !important;
    font-family: var(--cc-serif);
    font-size: clamp(2rem, 1.8rem + 0.5vw, 2.4rem);
    line-height: 1.5;
    color: var(--cc-ink);
}

.cc-about { padding-bottom: clamp(40px, 5vw, 64px); }   /* cc.5: menos blanco al final */

/* ---------- e) Aviso antes del pie ---------- */

.cc-disclaimer {
    padding-block: 28px;
    background: #fff;
    border-top: 1px solid var(--cc-line);
}

.cc-disclaimer p {
    margin: 0;
    text-align: center;             /* cc.18 (Félix): aviso centrado */
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--cc-muted);
}

.cc-disclaimer a {
    margin-left: 6px;
    color: var(--cc-gold-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* cc.5: menos blanco bajo el aviso legal (el pie de Source trae 120 px arriba y abajo) */
.cc-home ~ .gh-footer { margin-top: 48px; }
.cc-home ~ .gh-footer .gh-footer-signup { margin-bottom: 64px; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .cc-hero-inner { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
    .cc-hero-photo {
        order: -1;
        justify-self: center;
        max-width: 560px;
        margin-bottom: 0;
        margin-inline: calc(-1 * var(--cc-gap));
        width: calc(100% + 2 * var(--cc-gap));
    }
    .cc-hero-photo img {
        height: 225px;
        aspect-ratio: auto;
        object-position: 56% 18%;
        -webkit-mask-image:
            linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
            linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
        mask-image:
            linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
            linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
    }
    .cc-hero-caption { display: none; }
    .cc-hero-main { margin-top: -12px; position: relative; }
    .cc-cards { grid-template-columns: 1fr; }
    .cc-about-inner { grid-template-columns: 1fr; }
    .cc-principles { grid-template-columns: 1fr; }
    .cc-about-photo img { width: 56px; height: 56px; }
}

@media (max-width: 560px) {
    .cc-form-row { flex-direction: column; }
    .cc-btn { width: 100%; }
    .cc-item-link { grid-template-columns: 1fr; grid-template-areas: "meta" "title"; }
    .cc-item-arrow { display: none; }
    .cc-about-body { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-card, .cc-item-arrow, .cc-btn { transition: none; }
    .cc-card:hover { transform: none; }
}

/* ==========================================================================
   cc.14 (29-oct-2026): cambios de home pedidos por Félix
   ========================================================================== */

/* Llamada bajo el formulario (sustituye al texto de consentimiento).
   Oro #CDA862 sobre azul noche #122036: 7,3:1 (AAA); sobre el punto más claro del degradado (#1a2c47): 6,3:1 (AA). */
.cc-form-cta {
    margin: 16px 0 0;
    font-family: var(--cc-serif);
    font-size: clamp(1.8rem, 1.65rem + 0.35vw, 2.1rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--cc-gold);
}
.cc-form.success .cc-form-cta { display: none; }

/* Últimas publicaciones: botones a cada sección, debajo de la lista */
.cc-section-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}
.cc-btn-section {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cc-navy);
    text-decoration: none;
    background: #fff;
    border: 1px solid rgb(18 32 54 / 0.35);
    border-radius: 100px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cc-btn-section:hover {
    color: #fff;
    background: var(--cc-navy);
    border-color: var(--cc-navy);
}

/* ==========================================================================
   cc.15 (29-oct-2026)
   ========================================================================== */

/* Enlace pequeño «Privacidad» bajo la llamada (crema atenuado sobre navy, 10,4:1) */
.cc-form-privacy { margin: 8px 0 0; font-size: 1.3rem; line-height: 1.4; }
.cc-form-privacy a { color: var(--cc-on-navy-muted); text-decoration: underline; text-underline-offset: 3px; }
.cc-form-privacy a:hover { color: #fff; }
.cc-form.success .cc-form-privacy { display: none; }

/* ==========================================================================
   cc.16 (29-oct-2026): botones de sección bajo «Últimas publicaciones»
   Bloques navy en rejilla de 3 (mismas columnas que «Qué encontrarás aquí»), filete oro arriba,
   titular serif crema y flecha dorada. Hover/focus: fondo oro y texto navy.
   Contraste: crema #F0ECE2 sobre navy 13,9:1 · oro #CDA862 sobre navy 7,3:1 · navy sobre oro 7,3:1 (AA y AAA).
   ========================================================================== */
.cc-section-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: clamp(32px, 4vw, 48px);
}
.cc-btn-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 76px;
    padding: 20px clamp(20px, 2.4vw, 28px);
    font-family: var(--cc-serif);
    font-size: clamp(1.9rem, 1.7rem + 0.4vw, 2.2rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--cc-cream);
    text-decoration: none;
    background: var(--cc-navy);
    border: 0;
    border-top: 3px solid var(--cc-gold);
    border-radius: 4px;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.cc-btn-section-arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    font-family: var(--cc-sans);
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--cc-gold);
    border: 1px solid rgb(205 168 98 / 0.6);
    border-radius: 50%;
    transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.cc-btn-section:hover,
.cc-btn-section:focus-visible {
    color: var(--cc-navy);
    background: var(--cc-gold);
    border-color: var(--cc-gold);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -18px rgb(18 32 54 / 0.45);
}
.cc-btn-section:hover .cc-btn-section-arrow,
.cc-btn-section:focus-visible .cc-btn-section-arrow {
    color: var(--cc-navy);
    border-color: var(--cc-navy);
    transform: translateX(3px);
}
.cc-home .cc-btn-section:focus-visible { outline: 3px solid var(--cc-navy); outline-offset: 3px; }
@media (max-width: 900px) {
    .cc-section-buttons { grid-template-columns: 1fr; gap: 12px; }
    .cc-btn-section { min-height: 64px; padding: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .cc-btn-section, .cc-btn-section-arrow { transition: none; }
    .cc-btn-section:hover, .cc-btn-section:focus-visible { transform: none; }
    .cc-btn-section:hover .cc-btn-section-arrow { transform: none; }
}

/* ==========================================================================
   cc.17 (29-oct-2026): «Qué encontrarás aquí» con diseño v13 + última publicación
   ========================================================================== */
/* Línea dorada superior idéntica en las tres tarjetas.
   Causa del desalineado: border-top de 3 px + bordes laterales de 1 px de color distinto (gris en las blancas, navy en la del medio)
   y radio de 4 px; el navegador ingletea la esquina y la línea dorada se veía con otra forma/altura en la tarjeta navy.
   Ahora: sin borde superior; la línea es un ::before absoluto (top 0, 3 px, sobre los bordes laterales), igual en las tres. */
.cc-cards--latest {
    grid-template-rows: auto auto 1fr;   /* título · frase · última publicación */
    row-gap: 0;
}
.cc-cards--latest .cc-card {
    position: relative;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;          /* filas compartidas: el separador de «Lo último» queda alineado */
    row-gap: 14px;
    gap: 14px;
    padding-top: calc(clamp(24px, 3vw, 36px) + 3px);
    border-top: 0;
    border-radius: 4px;
}
.cc-cards--latest .cc-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    height: 3px;
    background: var(--cc-gold);
    border-radius: 4px 4px 0 0;
}
.cc-cards--latest .cc-card:hover { transform: none; }   /* sin salto: si una sube, las líneas dejan de estar alineadas */
.cc-cards--latest .cc-card:hover { box-shadow: 0 12px 32px -18px rgb(18 32 54 / 0.45); }
.cc-card-link { color: inherit; text-decoration: none; }
.cc-card-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cc-cards--latest .cc-card-text { flex-grow: 0; }
.cc-card-latest {
    align-self: start;   /* el separador arranca donde empieza la fila 3, común a las tres */
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid var(--cc-line);
}
.cc-card--navy .cc-card-latest { border-top-color: rgb(205 168 98 / 0.40); }
.cc-card-post { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
.cc-card-post-title {
    font-family: var(--cc-serif);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cc-navy);
}
.cc-card--navy .cc-card-post-title { color: var(--cc-cream); }
.cc-card-post:hover .cc-card-post-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cc-card-post-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 1.3rem; color: var(--cc-muted); }
.cc-card--navy .cc-card-post-meta { color: var(--cc-on-navy-muted); }
.cc-cards--latest .cc-card-more { margin: 0; font-size: 1.4rem; }
.cc-card-soon { margin: 0; font-family: var(--cc-serif); font-size: 1.8rem; font-style: italic; color: var(--cc-muted); }
.cc-card--navy .cc-card-soon { color: var(--cc-on-navy-muted); }
@media (max-width: 900px) {
    .cc-cards--latest { grid-template-rows: none; row-gap: 20px; }
    .cc-cards--latest .cc-card { grid-row: auto; grid-template-rows: auto; display: flex; flex-direction: column; }
    .cc-cards--latest .cc-card-latest { align-self: stretch; }
}