/* ==========================================================================
   COCO — portada. Orden de secciones = orden de este archivo.
   ========================================================================== */

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

.coco-section--alt {
    background: var(--coco-surface);
}

.coco-section--tight {
    padding-block: calc(var(--coco-section) * 0.5);
}

.coco-head {
    display: grid;
    gap: 14px;
    margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
}

.coco-head--row {
    grid-template-columns: 1fr minmax(0, 26rem);
    align-items: end;
    gap: 24px 48px;
}

.coco-head--row > div {
    display: grid;
    gap: 14px;
}

@media (max-width: 899px) {
    .coco-head--row {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   1. Portada
   -------------------------------------------------------------------------- */
.coco-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: calc(100svh - var(--coco-nav-h));
    max-height: 920px;
}

.coco-hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--coco-stack);
    padding: clamp(2.5rem, 2rem + 3vw, 5rem) var(--coco-gutter);
    padding-left: max(var(--coco-gutter), calc((100vw - var(--coco-max)) / 2 + var(--coco-gutter)));
}

.coco-site .coco-hero__title {
    font-size: var(--coco-text-h1);
    letter-spacing: -0.045em;
}

.coco-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.coco-hero__media {
    position: relative;
    overflow: hidden;
    background: var(--coco-surface);
}

.coco-hero__media .coco-cover {
    position: absolute;
    inset: 0;
}

@media (max-width: 899px) {
    .coco-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        max-height: none;
    }

    .coco-hero__media {
        order: -1;
        aspect-ratio: 4 / 3;
    }
}

/* --------------------------------------------------------------------------
   2. Cifras
   -------------------------------------------------------------------------- */
.coco-stats {
    border-block: 1px solid var(--coco-line-soft);
}

.coco-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-block: 0;
}

.coco-stats__item {
    display: grid;
    gap: 6px;
    padding: clamp(24px, 3vw, 40px) 24px clamp(24px, 3vw, 40px) 0;
}

.coco-stats__item + .coco-stats__item {
    padding-left: 24px;
    border-left: 1px solid var(--coco-line-soft);
}

.coco-site .coco-stats__value {
    font-size: var(--coco-text-stat);
    letter-spacing: -0.025em;
}

.coco-stats__label {
    margin: 0;
    font-size: var(--coco-text-sm);
}

@media (max-width: 599px) {
    .coco-stats__grid {
        grid-template-columns: 1fr 1fr;
    }

    .coco-stats__item:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .coco-stats__item:nth-child(n + 3) {
        border-top: 1px solid var(--coco-line-soft);
    }
}

/* --------------------------------------------------------------------------
   3. Servicios (tarjetas 3×2)
   -------------------------------------------------------------------------- */
.coco-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.coco-card {
    display: flex;
    flex-direction: column;
    background: var(--coco-card);
    border: 1px solid var(--coco-line-soft);
    border-radius: var(--coco-radius);
    overflow: hidden;
    transition: border-color var(--coco-dur-fast) ease;
}

.coco-card:hover {
    border-color: var(--coco-line);
}

.coco-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--coco-surface);
}

.coco-card__media .coco-cover {
    transition: transform 1.2s var(--coco-ease);
}

.coco-card:hover .coco-card__media .coco-cover {
    transform: scale(1.04);
}

.coco-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: clamp(20px, 2vw, 28px);
}

.coco-card__text {
    flex: 1;
    margin: 0 0 12px;
}

@media (max-width: 1023px) {
    .coco-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .coco-cards {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   4. Banda panorámica
   -------------------------------------------------------------------------- */
.coco-band {
    height: clamp(260px, 38vw, 560px);
    overflow: hidden;
    background: var(--coco-surface);
}

/* --------------------------------------------------------------------------
   5. Carta (sección oscura)
   -------------------------------------------------------------------------- */
.coco-section--dark {
    background: var(--coco-dark);
    color: var(--coco-on-dark-muted);
}

.coco-site .coco-section--dark .coco-display {
    color: var(--coco-on-dark);
}

.coco-section--dark .coco-eyebrow {
    color: var(--coco-sand);
}

.coco-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 112px);
    align-items: start;
}

.coco-split__aside {
    position: sticky;
    top: calc(var(--coco-nav-h) + 32px);
    display: grid;
    justify-items: start;
    gap: var(--coco-stack);
}

.coco-menu {
    display: grid;
    gap: clamp(32px, 3vw, 48px);
}

.coco-site .coco-menu__title {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--coco-on-dark-line);
}

.coco-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.coco-menu__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-block: 14px;
    border-bottom: 1px solid var(--coco-on-dark-line);
}

.coco-menu__name {
    color: var(--coco-on-dark);
}

.coco-menu__dots {
    flex: 1;
    min-width: 24px;
    border-bottom: 1px dotted rgba(246, 242, 236, 0.28);
    transform: translateY(-4px);
}

.coco-menu__price {
    font-family: var(--coco-font-display);
    font-size: 1.125rem;
    color: var(--coco-sand);
    white-space: nowrap;
}

.coco-menu__note {
    margin: 0;
    font-size: var(--coco-text-sm);
}

.coco-menu__group:target .coco-menu__title {
    color: var(--coco-on-dark);
}

@media (max-width: 899px) {
    .coco-split {
        grid-template-columns: 1fr;
    }

    .coco-split__aside {
        position: static;
    }
}

/* --------------------------------------------------------------------------
   6. Galería
   -------------------------------------------------------------------------- */
.coco-gallery {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.coco-gallery__item {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--coco-radius);
    background: var(--coco-line-soft);
}

.coco-gallery__item:nth-child(even) {
    transform: translateY(clamp(12px, 2vw, 32px));
}

.coco-js .coco-gallery__item[data-reveal]:nth-child(even):not(.is-in) {
    transform: translateY(calc(clamp(12px, 2vw, 32px) + 18px));
}

.coco-js .coco-gallery__item[data-reveal]:nth-child(even).is-in {
    transform: translateY(clamp(12px, 2vw, 32px));
}

@media (max-width: 899px) {
    .coco-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   7. Tu cita (pasos)
   -------------------------------------------------------------------------- */
.coco-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.coco-steps__item {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 28px 28px 8px 0;
    border-top: 1px solid var(--coco-line);
}

.coco-steps__item + .coco-steps__item {
    padding-left: 28px;
}

.coco-site .coco-steps__num {
    font-size: var(--coco-text-stat);
    color: var(--coco-accent);
    margin-bottom: 12px;
}

@media (max-width: 899px) {
    .coco-steps {
        grid-template-columns: 1fr 1fr;
        row-gap: 32px;
    }

    .coco-steps__item:nth-child(odd) {
        padding-left: 0;
    }
}

@media (max-width: 599px) {
    .coco-steps {
        grid-template-columns: 1fr;
    }

    .coco-steps__item + .coco-steps__item {
        padding-left: 0;
    }
}

/* --------------------------------------------------------------------------
   8. Visítanos
   -------------------------------------------------------------------------- */
.coco-visit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 112px);
    align-items: center;
}

.coco-visit__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--coco-radius);
}

.coco-visit__text {
    display: grid;
    justify-items: start;
    gap: var(--coco-stack);
}

.coco-hours {
    width: 100%;
    max-width: 30rem;
    margin: 0;
}

.coco-hours__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 12px;
    border-bottom: 1px solid var(--coco-line);
}

.coco-hours__row dt {
    color: var(--coco-ink);
}

.coco-hours__row dd {
    margin: 0;
}

.coco-address {
    font-style: normal;
}

@media (max-width: 899px) {
    .coco-visit {
        grid-template-columns: 1fr;
    }

    .coco-visit__media {
        aspect-ratio: 4 / 3;
    }
}

/* --------------------------------------------------------------------------
   9. Tarjeta de regalo
   -------------------------------------------------------------------------- */
.coco-gift {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
    align-items: center;
    padding: clamp(28px, 4vw, 64px);
    border: 1px solid var(--coco-line);
    border-radius: var(--coco-radius);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(205, 184, 148, 0.28), transparent 60%),
        var(--coco-surface);
}

.coco-gift__text {
    display: grid;
    justify-items: start;
    gap: var(--coco-stack);
}

.coco-gift__media {
    display: flex;
    justify-content: center;
    --coco-gift-h: 320px;
}

.coco-site .coco-gift__media img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--coco-gift-h);
}

@media (max-width: 899px) {
    .coco-gift {
        grid-template-columns: 1fr;
    }

    .coco-gift__media {
        --coco-gift-h: 220px;
    }
}

/* --------------------------------------------------------------------------
   10. Contacto
   -------------------------------------------------------------------------- */
.coco-contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
}

.coco-contact__card {
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 12px;
    padding: clamp(28px, 3vw, 44px);
    background: var(--coco-card);
    border: 1px solid var(--coco-line-soft);
    border-radius: var(--coco-radius);
}

.coco-contact__line {
    margin: 0 0 12px;
    color: var(--coco-ink);
}

@media (max-width: 699px) {
    .coco-contact {
        grid-template-columns: 1fr;
    }
}