/* ============================================================
   Sitioideal — Diseño «Ramo» (florerías, arreglos florales y viveros) · paso 7.z.52a
   Va encima de sitio.css. Fresco y delicado, como florería: fondo crema de papel de seda, el verde de los tallos en
   los adornos y el color del negocio en los botones y los moños. Títulos con serifa (Gloock), lo escrito a mano en
   Dancing Script (el giro, los antetítulos, los precios de las etiquetas, los pies de foto) y el texto en Hanken Grotesk.
   La foto de portada va envuelta como un ramo: en un círculo, con papel kraft detrás y delante como cono, el moño del
   acento y una tarjetita; unos pétalos caen despacio. Los arreglos son tarjetas con la foto en una ventana de arco y el
   precio en una etiqueta de regalo colgada de su hilo; la galería, ventanas de arco con su pie escrito a mano.
   Cada título lleva abajo una ramita (el tallo con su hoja). El pie tiene la orilla ondulada del papel de seda.
   Los textos usan el color principal oscurecido para que siempre se lean.
   HTML propio: app/vistas/sitio/disenos/ramo/
   ============================================================ */

.diseno-ramo {
    --ra-titulo: "Gloock", "Georgia", serif;
    --ra-mano: "Dancing Script", "Brush Script MT", cursive;
    --ra-letra: "Hanken Grotesk", "Archivo", system-ui, sans-serif;
    --ra-papel: color-mix(in srgb, var(--c-fondo) 30%, #FBF6F1);                  /* crema, papel de seda */
    --ra-seda: color-mix(in srgb, var(--c-primario) 9%, #FFFBF8);                  /* papel de seda del color del negocio */
    --ra-blanco: #FFFFFF;
    --ra-tinta: color-mix(in srgb, var(--c-primario) 10%, #24201F);
    --ra-tinta-suave: color-mix(in srgb, var(--ra-tinta) 76%, transparent);
    --ra-principal: color-mix(in srgb, var(--c-primario) 85%, #000);
    --ra-suave: color-mix(in srgb, var(--c-primario) 16%, #FFFFFF);
    --ra-hoja: #4D7A4F;                                                              /* el verde de los tallos */
    --ra-hoja-suave: #DCE8D6;
    --ra-kraft: #CDA57C;
    --ra-kraft-claro: #E3C7A3;
    --ra-kraft-oscuro: #A97F57;
    --ra-linea: color-mix(in srgb, var(--ra-tinta) 13%, transparent);
    --ra-linea-fuerte: color-mix(in srgb, var(--ra-tinta) 26%, transparent);
    --ra-sombra: 0 22px 40px -28px rgba(70, 45, 35, .5), 0 1px 3px rgba(70, 45, 35, .06);
    /* La ramita de abajo de los títulos: el tallo con su hoja */
    --ra-ramita: radial-gradient(ellipse 8px 4.5px at 50% 50%, var(--ra-hoja) 92%, transparent 100%) 50% 50% / 18px 10px no-repeat,
                 linear-gradient(var(--ra-hoja), var(--ra-hoja)) 0 50% / 100% 1.5px no-repeat;

    /* Superficies (sitio.css) */
    --s-fondo: var(--ra-papel);
    --s-alterna: var(--ra-seda);
    --s-tarjeta: var(--ra-blanco);
    --s-tarjeta-alterna: var(--ra-blanco);
    --s-encabezado: var(--ra-papel);
    --s-texto: var(--ra-tinta);
    --s-titulo: var(--ra-tinta);
    --s-linea: var(--ra-linea);
    --s-linea-fuerte: var(--ra-linea-fuerte);

    background: var(--ra-papel);
    font-family: var(--ra-letra);
    font-size: 1.05rem;
}

/* Donde el navegador puede, cada color se ajusta solo lo necesario para leerse sobre lo claro */
@supports (color: oklch(from red l c h)) {
    .diseno-ramo {
        --ra-principal: oklch(from var(--c-primario) min(l, .47) c h);
        --ra-tinta: oklch(from color-mix(in srgb, var(--c-primario) 10%, #24201F) min(l, .26) c h);
    }
}

/* Títulos con serifa */
.diseno-ramo h1,
.diseno-ramo h2,
.diseno-ramo h3,
.diseno-ramo h4,
.diseno-ramo .logo__nombre,
.diseno-ramo .especial__titulo,
.diseno-ramo .equipo__titulo,
.diseno-ramo .persona__nombre,
.diseno-ramo .promocion__titulo,
.diseno-ramo .servicio__nombre,
.diseno-ramo .sucursal__nombre,
.diseno-ramo .redes__titulo {
    font-family: var(--ra-titulo);
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

/* ---------- Encabezado: papel crema ---------- */
.diseno-ramo .encabezado {
    border-bottom: 1px solid var(--ra-linea);
    background: color-mix(in srgb, var(--ra-papel) 92%, transparent);
    backdrop-filter: saturate(1.1) blur(10px);
}
.diseno-ramo .logo__nombre { color: var(--ra-tinta); font-size: 1.5rem; }
.diseno-ramo .menu a { color: var(--ra-tinta); font-size: .95rem; font-weight: 600; }
.diseno-ramo .menu a:hover { color: var(--ra-principal); }

/* ---------- Botones: redondos y suaves ---------- */
.diseno-ramo .boton {
    border-radius: 999px;
    font-family: var(--ra-letra);
    font-size: 1rem;
    font-stretch: normal;
    font-weight: 700;
    letter-spacing: .01em;
}
.diseno-ramo .boton--principal {
    border: 0;
    background: var(--ra-principal);
    color: #FFFFFF;
    box-shadow: 0 14px 24px -14px color-mix(in srgb, var(--ra-principal) 80%, transparent);
}
.diseno-ramo .boton--secundario { border: 1.5px solid var(--ra-linea-fuerte); background: var(--ra-blanco); color: var(--ra-tinta); }
.diseno-ramo .boton--secundario:hover { border-color: var(--ra-principal); color: var(--ra-principal); }
.diseno-ramo .boton-chico { border-radius: 999px; }

/* ---------- Portada: el ramo envuelto en papel kraft ---------- */
.ra-portada {
    position: relative;
    padding-top: clamp(36px, 5vw, 72px);
    overflow: hidden;
    background:
        radial-gradient(60% 70% at 85% 40%, var(--ra-seda), transparent 70%),
        linear-gradient(180deg, var(--ra-papel), color-mix(in srgb, var(--ra-seda) 60%, var(--ra-papel)));
    color: var(--ra-tinta);
}

.ra-portada__rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 34px;
    padding-bottom: clamp(48px, 6vw, 80px);
}
@media (min-width: 900px) {
    .ra-portada__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 56px; }
}

.ra-giro {
    margin: 0 0 6px;
    color: var(--ra-principal);
    font-family: var(--ra-mano);
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
    font-weight: 600;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.ra-portada__nombre {
    margin: 0 0 18px;
    color: var(--ra-tinta);
    font-size: clamp(2.8rem, 1.4rem + 4vw, 4.8rem);
    line-height: 1;
    overflow-wrap: anywhere;
}
.ra-portada__nombre--medio { font-size: clamp(2.5rem, 1.3rem + 3.4vw, 4.1rem); }
.ra-portada__nombre--largo { font-size: clamp(2.1rem, 1.1rem + 2.8vw, 3.4rem); }

.ra-portada__eslogan {
    max-width: 40ch;
    margin: 0 0 28px;
    color: var(--ra-tinta-suave);
    font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem);
    line-height: 1.55;
}
.ra-portada__botones { margin-bottom: 22px; }
.diseno-ramo .estado-ahora--claro { border-color: var(--ra-linea-fuerte); border-radius: 999px; background: var(--ra-blanco); box-shadow: none; }

/* El ramo */
.ra-portada__visual {
    position: relative;
    justify-self: center;
    width: min(100%, 440px);
}
/* Dos hojas de papel de seda detrás (solo adorno) */
.ra-portada__visual::before,
.ra-portada__visual::after {
    content: "";
    position: absolute;
    inset: 8% 4% 18%;
    z-index: 0;
    border-radius: 6px;
    background: color-mix(in srgb, var(--c-primario) 14%, #FFFFFF);
    opacity: .7;
    transform: rotate(-9deg);
    pointer-events: none;
}
.ra-portada__visual::after { background: color-mix(in srgb, var(--c-acento) 18%, #FFFFFF); opacity: .6; transform: rotate(7deg) translate(4%, 2%); }

.ra-ramo {
    position: relative;
    z-index: 1;
    aspect-ratio: 5 / 6;
}

/* El papel kraft: detrás, abierto como abanico; enfrente, el cono con su orilla ondulada */
.ra-papel { position: absolute; display: block; pointer-events: none; }
.ra-papel--atras {
    top: 4%;
    right: 0;
    left: 0;
    height: 84%;
    background:
        linear-gradient(100deg, rgba(255, 255, 255, .18) 0 18%, rgba(0, 0, 0, .08) 18.5% 19%, transparent 19.5% 80%, rgba(0, 0, 0, .08) 80.5% 81%, rgba(255, 255, 255, .14) 81.5%),
        linear-gradient(180deg, var(--ra-kraft-claro), var(--ra-kraft));
    clip-path: polygon(0 10%, 14% 3%, 30% 7%, 50% 0, 70% 7%, 86% 3%, 100% 10%, 59% 100%, 41% 100%);
    filter: drop-shadow(0 14px 18px rgba(80, 50, 30, .25));
}
.ra-flores {
    position: absolute;
    top: 3%;
    left: 50%;
    z-index: 2;
    width: 72%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 7px solid var(--ra-blanco);
    border-radius: 50%;
    background: var(--ra-suave);
    box-shadow: 0 18px 30px -16px rgba(70, 40, 30, .55);
    transform: translateX(-50%);
    box-sizing: border-box;
}
.ra-flores picture,
.ra-flores picture img { width: 100%; height: 100%; }
.ra-flores picture img { object-fit: cover; }
/* La nota de IA arriba de la foto, lejos del papel de enfrente */
.ra-flores > .marca-ia--foto { top: 16%; bottom: auto; }
.ra-flores--inicial {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c-primario) 26%, #FFFFFF) 0 14%, transparent 15%) 0 0 / 46px 46px,
        radial-gradient(circle at 70% 75%, color-mix(in srgb, var(--c-acento) 30%, #FFFFFF) 0 10%, transparent 11%) 0 0 / 46px 46px,
        var(--ra-suave);
}
.ra-flores__inicial { color: var(--ra-principal); font-family: var(--ra-titulo); font-size: clamp(5rem, 3.5rem + 5vw, 8rem); line-height: 1; }
.ra-papel--frente {
    top: 52%;
    right: 13%;
    left: 13%;
    z-index: 3;
    height: 44%;
    background:
        linear-gradient(90deg, transparent 0 49.4%, rgba(0, 0, 0, .12) 49.5% 50.5%, transparent 50.6%),
        linear-gradient(105deg, rgba(255, 255, 255, .22), transparent 40%, rgba(0, 0, 0, .1) 70%, rgba(255, 255, 255, .08)),
        linear-gradient(180deg, var(--ra-kraft), var(--ra-kraft-oscuro));
    clip-path: polygon(0 4%, 6% 0, 12% 5%, 18% 1%, 25% 6%, 32% 1%, 39% 6%, 46% 1%, 53% 6%, 60% 1%, 67% 6%, 74% 1%, 81% 6%, 88% 1%, 94% 5%, 100% 0,
                       100% 4%, 58% 100%, 42% 100%);
    filter: drop-shadow(0 -6px 10px rgba(80, 50, 30, .18));
}

/* El moño del acento, donde se junta el cono */
.ra-mono {
    position: absolute;
    top: 74%;
    left: 50%;
    z-index: 4;
    width: 34%;
    height: auto;
    overflow: visible;
    transform: translateX(-50%);
    filter: drop-shadow(0 6px 6px rgba(60, 30, 20, .25));
}
.ra-mono__lazo { fill: var(--c-acento); stroke: color-mix(in srgb, var(--c-acento) 70%, #000); stroke-width: 1.5; }
.ra-mono__punta { fill: color-mix(in srgb, var(--c-acento) 88%, #000); }
.ra-mono__nudo { fill: color-mix(in srgb, var(--c-acento) 82%, #000); }

/* La tarjetita colgada del moño, con su hilo */
.ra-tarjeta {
    position: absolute;
    top: 72%;
    right: -2%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 46%;
    margin: 0;
    padding: 10px 16px 11px 24px;
    background: var(--ra-blanco);
    color: var(--ra-tinta);
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
    filter: drop-shadow(0 8px 10px rgba(60, 35, 25, .22));
    transform: rotate(7deg);
    transform-origin: 0 50%;
}
/* El agujero de la tarjeta */
.ra-tarjeta::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 9px;
    width: 7px;
    height: 7px;
    border: 1.5px solid var(--ra-kraft-oscuro);
    border-radius: 50%;
    background: var(--ra-kraft-claro);
    transform: translateY(-50%);
}
.ra-tarjeta__para { color: var(--ra-principal); font-family: var(--ra-mano); font-size: 1.45rem; font-weight: 700; line-height: 1; }
.ra-tarjeta__texto { font-size: .82rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }

/* Los pétalos que caen */
.ra-petalos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ra-petalos i {
    position: absolute;
    top: -30px;
    width: 14px;
    height: 10px;
    border-radius: 80% 0 80% 0;
    background: color-mix(in srgb, var(--c-primario) 45%, #FFFFFF);
    opacity: .75;
    animation: ra-caer 16s linear infinite;
}
.ra-petalos i:nth-child(1) { left: 8%; animation-delay: -2s; }
.ra-petalos i:nth-child(2) { left: 22%; width: 11px; height: 8px; background: color-mix(in srgb, var(--c-acento) 45%, #FFFFFF); animation-duration: 19s; animation-delay: -9s; }
.ra-petalos i:nth-child(3) { left: 41%; animation-duration: 21s; animation-delay: -5s; }
.ra-petalos i:nth-child(4) { left: 57%; width: 12px; height: 9px; animation-duration: 17s; animation-delay: -13s; }
.ra-petalos i:nth-child(5) { left: 71%; background: color-mix(in srgb, var(--c-acento) 45%, #FFFFFF); animation-duration: 23s; animation-delay: -7s; }
.ra-petalos i:nth-child(6) { left: 84%; width: 10px; height: 7px; animation-duration: 18s; animation-delay: -15s; }
.ra-petalos i:nth-child(7) { left: 94%; animation-duration: 20s; animation-delay: -3s; }
@keyframes ra-caer {
    from { transform: translate(0, 0) rotate(0deg); }
    50%  { transform: translate(30px, 320px) rotate(160deg); }
    to   { transform: translate(-10px, 680px) rotate(320deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ra-petalos i { animation: none; }
    .ra-petalos i:nth-child(odd) { top: 18%; }
    .ra-petalos i:nth-child(even) { top: 62%; }
}

@media (max-width: 899.98px) {
    .ra-portada__visual { width: min(100%, 380px); }
}
@media (max-width: 599.98px) {
    .ra-portada__visual { width: min(92%, 330px); }
    .ra-tarjeta { right: -4%; padding: 8px 12px 9px 21px; }
    .ra-tarjeta__para { font-size: 1.25rem; }
    .ra-tarjeta__texto { font-size: .74rem; }
}

/* ---------- Títulos de sección: con su ramita abajo ---------- */
.diseno-ramo .seccion h2 {
    color: var(--ra-tinta);
    font-size: clamp(2.1rem, 1.5rem + 1.9vw, 3rem);
    line-height: 1.08;
}
.diseno-ramo .seccion h2::after {
    content: "";
    display: block;
    width: 84px;
    height: 12px;
    margin-top: 14px;
    background: var(--ra-ramita);
}
.diseno-ramo .seccion [style*="text-align: center"] h2::after,
.diseno-ramo .seccion .centrado h2::after { margin-inline: auto; }

.ra-cabeza { margin-bottom: 26px; }
.ra-cabeza h2 { margin: 0 !important; }
.ra-antetitulo {
    margin: 0 0 2px;
    color: var(--ra-principal);
    font-family: var(--ra-mano);
    font-size: clamp(1.45rem, 1.25rem + .6vw, 1.8rem);
    font-weight: 600;
    line-height: 1.1;
}

/* ---------- Arreglos: tarjetas con su etiqueta de regalo ---------- */
.diseno-ramo .catalogo__indice a {
    border: 1.5px solid var(--ra-linea-fuerte);
    border-radius: 999px;
    background: var(--ra-blanco);
    color: var(--ra-tinta);
    font-weight: 600;
    white-space: nowrap;
}
.diseno-ramo .catalogo__indice a:hover { border-color: var(--ra-principal); color: var(--ra-principal); }

.ra-grupo + .ra-grupo { margin-top: 56px; }
.ra-grupo__nombre {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    color: var(--ra-tinta);
    font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem);
    line-height: 1.15;
}
.ra-grupo__nombre .icono {
    flex: none;
    width: 46px;
    height: 46px;
    padding: 10px;
    border-radius: 50%;
    background: var(--ra-hoja-suave);
    color: var(--ra-hoja);
    stroke-width: 1.7;
    box-sizing: border-box;
}
.ra-grupo__descripcion { max-width: 64ch; margin: 0 0 8px 58px; color: var(--ra-tinta-suave); }

.ra-tarjetas {
    display: grid;
    gap: 26px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) {
    .ra-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
}
@media (min-width: 1000px) {
    .ra-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ra-arreglo {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ra-linea);
    border-radius: 26px;
    background: var(--ra-blanco);
    box-shadow: var(--ra-sombra);
    color: var(--ra-tinta);
}
.ra-arreglo--favorito { border-color: color-mix(in srgb, var(--c-acento) 55%, transparent); }

.ra-arreglo__marco { position: relative; margin: 12px 12px 0; }
/* La foto en su ventana de arco */
.ra-arreglo__foto {
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: 50% 50% 16px 16px / 34% 34% 16px 16px;
    background: var(--ra-seda);
}
.ra-arreglo__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Sin foto: el dibujo de su grupo sobre papel de seda con florecitas */
.ra-arreglo__foto--dibujo {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--c-primario) 22%, #FFFFFF) 0 5px, transparent 6px) 0 0 / 38px 38px,
        radial-gradient(circle at 75% 72%, var(--ra-hoja-suave) 0 4px, transparent 5px) 0 0 / 38px 38px,
        var(--ra-seda);
    color: var(--ra-hoja);
}
.ra-arreglo__foto--dibujo .icono {
    width: 76px;
    height: 76px;
    padding: 18px;
    border-radius: 50%;
    background: var(--ra-blanco);
    stroke-width: 1.5;
    box-shadow: 0 10px 18px -12px rgba(60, 40, 30, .45);
    box-sizing: border-box;
}

/* «El favorito»: un listón del acento */
.ra-arreglo__favorito {
    position: absolute;
    top: 18px;
    left: -18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 22px 6px 12px;
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    font-family: var(--ra-mano);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
    box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .4);
}
.ra-arreglo__favorito .icono { width: 15px; height: 15px; fill: currentColor; }

/* El precio en una etiqueta de regalo, colgada de su hilo */
.ra-etiqueta {
    position: absolute;
    top: 26px;
    right: 6px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 8px 14px 9px 24px;
    background: var(--ra-kraft-claro);
    color: var(--ra-tinta);
    line-height: 1;
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
    filter: drop-shadow(0 8px 8px rgba(60, 35, 25, .25));
    transform: rotate(-5deg);
}
.ra-etiqueta::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ra-blanco);
    box-shadow: inset 0 0 0 1.5px var(--ra-kraft-oscuro);
    transform: translateY(-50%);
}
.ra-etiqueta small { color: var(--ra-tinta-suave); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ra-etiqueta strong { font-family: var(--ra-mano); font-size: 1.75rem; font-weight: 700; white-space: nowrap; font-variant-numeric: lining-nums; }
/* El hilo, que sube hasta la orilla de la tarjeta */
.ra-arreglo__marco:has(.ra-etiqueta)::after {
    content: "";
    position: absolute;
    top: -12px;
    right: 64px;
    z-index: 1;
    width: 1.5px;
    height: 46px;
    background: var(--ra-kraft-oscuro);
    transform: rotate(-24deg);
    transform-origin: top;
}

.ra-arreglo__cuerpo { flex: 1; padding: 18px 22px 0; }
.ra-arreglo__nombre { margin: 0 0 6px; color: var(--ra-tinta); font-size: 1.45rem; line-height: 1.15; overflow-wrap: anywhere; }
.ra-arreglo__descripcion { margin: 0; color: var(--ra-tinta-suave); font-size: .98rem; line-height: 1.55; }
.ra-arreglo__nota {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    margin: 12px 0 0;
    padding: 5px 12px 5px 8px;
    border-radius: 999px;
    background: var(--ra-hoja-suave);
    color: color-mix(in srgb, var(--ra-hoja) 55%, #1D2A1E);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.3;
    box-sizing: border-box;
}
.ra-arreglo__nota .icono { flex: none; width: 17px; height: 17px; }
.diseno-ramo .ra-arreglo .ficha-ver { margin-top: 10px; color: var(--ra-principal); }

.ra-pedir {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 22px 22px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--ra-principal);
    color: #FFFFFF;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.ra-pedir .icono { width: 17px; height: 17px; }
.ra-pedir:hover { background: var(--ra-tinta); }

/* ---------- Galería: ventanas de arco con su pie escrito a mano ---------- */
.ra-ventanas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
    margin: 0;
    padding: 0 0 26px;
    list-style: none;
}
.ra-ventanas > .ra-ventana:nth-child(even) { margin-top: 26px; margin-bottom: -26px; }
@media (min-width: 700px) {
    .ra-ventanas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; padding-bottom: 34px; }
    .ra-ventanas > .ra-ventana:nth-child(even) { margin-top: 0; margin-bottom: 0; }
    .ra-ventanas > .ra-ventana:nth-child(3n + 2) { margin-top: 34px; margin-bottom: -34px; }
}
@media (min-width: 1000px) {
    .ra-ventanas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ra-ventanas > .ra-ventana:nth-child(3n + 2) { margin-top: 0; margin-bottom: 0; }
    .ra-ventanas > .ra-ventana:nth-child(4n + 2),
    .ra-ventanas > .ra-ventana:nth-child(4n + 3) { margin-top: 34px; margin-bottom: -34px; }
}
.galeria__mas > .ra-ventanas { margin-top: 22px; }

.diseno-ramo .ra-ventana__enlace {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
    border-radius: 0;
    background: none;
    color: var(--ra-tinta);
    text-decoration: none;
}
.diseno-ramo .ra-ventana__enlace img { aspect-ratio: auto; transform: none; }
.ra-ventana__marco {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 7px solid var(--ra-blanco);
    border-radius: 999px 999px 14px 14px;
    background: var(--ra-seda);
    box-shadow: var(--ra-sombra);
}
.ra-ventana__marco img { width: 100%; height: 100%; object-fit: cover; transition: scale .35s ease; }
.ra-ventana__enlace:hover .ra-ventana__marco img { scale: 1.04; }
/* La nota de IA arriba de la foto, lejos del arco de abajo */
.ra-ventana__marco > .marca-ia--foto { bottom: 10px; }
.ra-ventana__pie {
    color: var(--ra-tinta);
    font-family: var(--ra-mano);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}
@media (max-width: 599.98px) {
    .ra-ventana__marco { border-width: 5px; }
    .ra-ventana__pie { font-size: 1.12rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ra-ventana__marco img { transition: none; }
    .ra-ventana__enlace:hover .ra-ventana__marco img { scale: none; }
}
.diseno-ramo .galeria__ver-mas { border-radius: 999px; }

/* ---------- Lo demás: tarjetas redondas, suaves ---------- */
.diseno-ramo .testimonio,
.diseno-ramo .promocion,
.diseno-ramo .pregunta,
.diseno-ramo .contacto__item,
.diseno-ramo .sucursal,
.diseno-ramo .especial__punto,
.diseno-ramo .persona,
.diseno-ramo .servicio,
.diseno-ramo .destacado-tarjeta { border-color: var(--ra-linea); border-radius: 22px; box-shadow: var(--ra-sombra); }
.diseno-ramo .destacado-tarjeta__foto { border-radius: 50% 50% 14px 14px / 30% 30% 14px 14px; }
.diseno-ramo .promocion__foto { border-radius: 16px; }
.diseno-ramo .promocion__hoy { border-radius: 999px; background: var(--c-acento); color: var(--c-sobre-acento); }
.diseno-ramo .testimonio__texto { font-size: 1.06rem; line-height: 1.6; }
.diseno-ramo .testimonio__nombre { font-family: var(--ra-mano); font-size: 1.35rem; font-weight: 700; }
.diseno-ramo .testimonio > .icono { color: var(--ra-principal); opacity: .3; }
.diseno-ramo .testimonio__iniciales,
.diseno-ramo .contacto__icono,
.diseno-ramo .especial__marca,
.diseno-ramo .persona__foto--iniciales,
.diseno-ramo .pregunta__signo { background: var(--ra-hoja-suave); color: color-mix(in srgb, var(--ra-hoja) 60%, #1D2A1E); }
/* La foto de Nosotros en una ventana de arco */
.diseno-ramo .nosotros__foto img { border: 8px solid var(--ra-blanco); border-radius: 999px 999px 18px 18px; box-shadow: var(--ra-sombra); }
.diseno-ramo .nosotros__desde { border: 1px solid var(--ra-linea); border-radius: 999px; background: var(--ra-blanco); color: var(--ra-tinta); }
.diseno-ramo .nosotros__desde strong,
.diseno-ramo .nosotros__desde .icono { color: var(--ra-principal); }
.diseno-ramo .mapa { border: 1px solid var(--ra-linea); border-radius: 22px; box-shadow: var(--ra-sombra); }
.diseno-ramo .red { border-color: var(--ra-linea-fuerte); border-radius: 999px; }
.diseno-ramo .red:hover { background: var(--ra-seda); }

/* El horario en una tarjeta, con el día de hoy marcado */
.diseno-ramo .horario__tabla { overflow: hidden; border: 1px solid var(--ra-linea); border-collapse: separate; border-spacing: 0; border-radius: 20px; background: var(--ra-blanco); }
.diseno-ramo .horario__tabla th,
.diseno-ramo .horario__tabla td { padding-inline: 18px; border-bottom-color: var(--ra-linea); }
.diseno-ramo .horario__tabla td { font-variant-numeric: tabular-nums; }
.diseno-ramo .horario__tabla tr:last-child th,
.diseno-ramo .horario__tabla tr:last-child td { border-bottom: 0; }
.diseno-ramo .horario__hoy th,
.diseno-ramo .horario__hoy td { background: var(--ra-seda); }
.diseno-ramo .horario__etiqueta { border-radius: 999px; background: var(--ra-principal); color: #FFFFFF; }

/* ---------- Pie con la orilla ondulada del papel de seda y barra del celular ---------- */
.diseno-ramo .pie { position: relative; margin-top: 26px; border-top: 0; background: var(--ra-tinta); color: rgba(251, 246, 241, .86); }
.diseno-ramo .pie::before {
    content: "";
    position: absolute;
    top: -14px;
    right: 0;
    left: 0;
    height: 15px;
    background: radial-gradient(circle at 50% 100%, var(--ra-tinta) 0 13px, transparent 14px) 0 0 / 28px 15px repeat-x;
    pointer-events: none;
}
.diseno-ramo .barra-acciones { background: color-mix(in srgb, var(--ra-papel) 96%, transparent); backdrop-filter: blur(10px); }
.diseno-ramo .barra-acciones__boton--principal { border-radius: 999px; font-weight: 700; }