/* Página de presentación de Enlacuadra (views/templates/presentacion.php). Mobile first */
:root {
    --verde: #0F5E5A;
    --verde-oscuro: #0A4441;
    --naranja: #E8692E;
    --tinta: #0C2B29;
    --tinta-suave: #47605E;
    --menta: #E6F1EC;
    --blanco: #fff;
    --mostaza: #F4B93E;
    --rotulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --texto: 'Figtree', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 1.0625rem/1.6 var(--texto); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2 { font-family: var(--rotulo); font-weight: 700; line-height: 1; text-wrap: balance; overflow-wrap: anywhere; }
h2 { font-size: clamp(2.25rem, 6vw, 3.5rem); }
h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
:focus-visible { outline: 3px solid var(--mostaza); outline-offset: 3px; border-radius: 2px; }
.ancho { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }

.boton {
    display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .625rem 1.5rem;
    background: var(--naranja); color: var(--tinta); border-radius: .5rem; font-weight: 700; text-decoration: none;
    transition: background-color .15s;
}
.boton:hover { background: #F28450; }
.boton--oscuro { background: var(--tinta); color: var(--blanco); }
.boton--oscuro:hover { background: var(--verde-oscuro); }

/* Barra */
.barra { background: var(--verde); color: var(--blanco); }
.barra-interior { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.barra-logo img { width: 9rem; height: auto; }
.barra-nav { display: flex; align-items: center; gap: 1.5rem; }
.barra-enlace { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; text-decoration: none; }
.barra-enlace:hover { text-decoration: underline; text-underline-offset: 4px; }
.barra-enlace--ancho { display: none; }

/* Portada: titular y la calle */
.portada { background: var(--verde); color: var(--blanco); overflow: hidden; }
.portada-texto { display: grid; gap: 1.5rem; padding-block: 1.5rem 2rem; }
.portada h1 { font-size: clamp(3.25rem, 14vw, 6.5rem); line-height: .95; }
.proximamente { justify-self: start; max-width: 22rem; padding: .875rem 1.25rem 1rem; background: var(--naranja); border-radius: .375rem; color: var(--tinta); font-weight: 600; line-height: 1.35; transform: rotate(-2deg); }
.proximamente strong { display: block; margin-bottom: .25rem; font: 700 clamp(3rem, 15vw, 4rem)/1 var(--rotulo); }
.portada-lado { display: grid; gap: 1.25rem; justify-items: start; max-width: 32rem; font-size: 1.125rem; }
.calle-ayuda { font-weight: 600; color: #CFE6DF; padding-bottom: .75rem; }

.calle {
    display: flex; align-items: flex-end; gap: .5rem; padding: .75rem 1rem 0;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.calle::-webkit-scrollbar { display: none; }

.local {
    --muro: #fff; --toldo-a: var(--naranja); --toldo-b: #fff; --acento: var(--verde); --alto: 0rem;
    flex: 0 0 9.75rem; display: flex; flex-direction: column; padding: 0; border: 0; background: none; color: var(--tinta);
    font: inherit; cursor: pointer; scroll-snap-align: center;
}
.local--taqueria { --muro: #F6D9C4; --toldo-a: #C8391F; --toldo-b: #FFF4E6; --acento: #A82C16; --alto: .75rem; }
.local--abarrotes { --muro: #F4B93E; --toldo-a: #1F6E43; --toldo-b: #FFF8E1; --acento: #175233; --alto: 2.25rem; }
.local--estetica { --muro: #BFE3E0; --toldo-a: #1C6FA8; --toldo-b: #fff; --acento: #155680; --alto: 0rem; }
.local--taller { --muro: #D5DADB; --toldo-a: #2E3A40; --toldo-b: #F4B93E; --acento: #2E3A40; --alto: 1.5rem; }
.local--pestanas { --muro: #F7D3E0; --toldo-a: #B4235F; --toldo-b: #FFF0F5; --acento: #931B4C; --alto: .25rem; }

.local-rotulo {
    display: flex; align-items: center; justify-content: center; min-height: calc(3.25rem + var(--alto)); padding: .5rem .375rem;
    background: var(--muro); border-radius: .375rem .375rem 0 0; color: var(--acento);
    font: 700 1.5rem/1 var(--rotulo); text-align: center;
}
.local-toldo {
    position: relative; z-index: 1; display: block; height: 2.75rem; margin-inline: -.25rem; transform-origin: top;
    background: linear-gradient(90deg, var(--toldo-a) 50%, var(--toldo-b) 50%) 0 0 / 25% 100%;
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - .625rem) no-repeat, radial-gradient(farthest-side at 50% 0, #000 96%, transparent) bottom / 12.5% .625rem repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - .625rem) no-repeat, radial-gradient(farthest-side at 50% 0, #000 96%, transparent) bottom / 12.5% .625rem repeat-x;
    animation: desenrollar .5s cubic-bezier(.2, .8, .3, 1) both;
}
.local:nth-child(2) .local-toldo { animation-delay: .1s; }
.local:nth-child(3) .local-toldo { animation-delay: .2s; }
.local:nth-child(4) .local-toldo { animation-delay: .3s; }
.local:nth-child(5) .local-toldo { animation-delay: .4s; }
@keyframes desenrollar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.local-frente { display: grid; grid-template-columns: 1fr 2.75rem; gap: .5rem; height: 7.25rem; margin-top: -.625rem; padding: 1.125rem .5rem 0; background: var(--muro); }
.local-vitrina { display: flex; align-items: center; justify-content: center; height: 4.25rem; background: #24403E; border-radius: .25rem; color: #8FB0AB; transition: background-color .2s, color .2s; }
.local-vitrina svg { width: 2rem; height: 2rem; fill: currentColor; }
.local-puerta { position: relative; background: var(--acento); border-radius: .25rem .25rem 0 0; }
.local-puerta::after { content: ''; position: absolute; top: 45%; right: .375rem; width: .3125rem; height: .3125rem; border-radius: 50%; background: var(--mostaza); }

.local:hover .local-vitrina { color: #fff; }
.local[aria-selected="true"] .local-vitrina { background: #FFE9A8; color: var(--acento); }

.banqueta { height: 1.25rem; background: #BFD2CB; border-top: .375rem solid #8FA8A0; }

/* Adentro del negocio elegido */
.adentro { background: var(--menta); padding-block: 2.5rem 3.5rem; }
.adentro-panel { display: grid; gap: 2rem; }
.adentro-panel[hidden] { display: none; }
.adentro-panel:focus-visible { outline-offset: .5rem; }
.adentro-texto h2 { margin-bottom: 1rem; }
.adentro-texto > p { max-width: 34rem; margin-bottom: 1.25rem; color: var(--tinta-suave); }
.palomitas li { position: relative; padding: .375rem 0 .375rem 1.75rem; font-weight: 600; }
.palomitas li::before {
    content: ''; position: absolute; left: .125rem; top: .8rem; width: .875rem; height: .5rem;
    border-left: .1875rem solid var(--naranja); border-bottom: .1875rem solid var(--naranja); transform: rotate(-45deg);
}

.celular { width: 100%; max-width: 17rem; margin-inline: auto; }
.celular-pantalla { padding: .5rem; background: var(--tinta); border-radius: 1.75rem; }
.celular-portada { display: grid; gap: .25rem; min-height: 9rem; align-content: end; padding: 1.25rem 1rem 1rem; background: var(--toldo-a); border-radius: 1.25rem 1.25rem 0 0; color: #fff; }
.celular-portada strong { font: 700 1.875rem/1 var(--rotulo); }
.celular-portada span { font-size: .8125rem; }
.celular-cuerpo { display: grid; padding: 1rem; background: #fff; border-radius: 0 0 1.25rem 1.25rem; font-size: .9375rem; }
.celular-grupo { margin-bottom: .25rem; font-weight: 700; color: var(--acento); }
.celular-renglon { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--menta); }
.celular-renglon span:last-child { font-weight: 700; }
.celular-boton { margin-top: 1rem; padding: .625rem; background: var(--acento); border-radius: .5rem; color: #fff; font-size: .8125rem; font-weight: 700; text-align: center; }
.celular figcaption { margin-top: .625rem; color: var(--tinta-suave); font-size: .8125rem; text-align: center; }

/* Mostrador: los dos lados */
.mostrador { padding-top: 3.5rem; }
.mostrador-intro { max-width: 36rem; margin: 1rem 0 2rem; color: var(--tinta-suave); }
.toldo {
    height: 2.5rem;
    background: linear-gradient(90deg, var(--verde) 50%, var(--naranja) 50%) 0 0 / 5rem 100%;
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 1.25rem) no-repeat, radial-gradient(farthest-side at 50% 0, #000 96%, transparent) bottom / 2.5rem 1.25rem repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 1.25rem) no-repeat, radial-gradient(farthest-side at 50% 0, #000 96%, transparent) bottom / 2.5rem 1.25rem repeat-x;
}
.mostrador-lados { display: grid; gap: 2.5rem; padding-block: 2rem 3.5rem; }
.mostrador-lado h3 { margin-bottom: 1rem; font: 700 2rem/1 var(--rotulo); color: var(--verde); }
.mostrador-lado dt { margin-top: 1rem; font-weight: 700; }
.mostrador-lado dd { color: var(--tinta-suave); }

/* Pasos */
.pasos { background: var(--verde); color: var(--blanco); padding-block: 3.5rem; }
.pasos-lista { display: grid; gap: 1.75rem; margin-top: 2rem; counter-reset: paso; }
.pasos-lista li { counter-increment: paso; display: grid; grid-template-columns: 3.25rem 1fr; grid-template-rows: auto 1fr; column-gap: 1rem; }
.pasos-lista li::before { content: counter(paso); grid-row: span 2; font: 700 4rem/.9 var(--rotulo); color: var(--mostaza); }
.pasos-lista p { color: #CFE6DF; }

/* Preguntas */
.preguntas { padding-block: 3.5rem; }
.preguntas-interior { display: grid; gap: 1.5rem; }
.preguntas details { border-bottom: 1px solid #C9DAD4; }
.preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding-block: .625rem; font-weight: 700; cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; flex: none; font: 700 1.75rem/1 var(--rotulo); color: var(--naranja); }
.preguntas details[open] summary::after { content: '\2212'; }
.preguntas details p { max-width: 40rem; padding-bottom: 1.125rem; color: var(--tinta-suave); }

/* Cierre y pie */
.cierre { background: var(--naranja); color: var(--tinta); padding-block: 3.5rem; }
.cierre-interior { display: grid; gap: 1.5rem; }
.cierre-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.cierre-correo { font-weight: 700; overflow-wrap: anywhere; }
.pie { background: var(--verde-oscuro); color: var(--blanco); padding-block: 1.5rem; }
.pie-interior { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.pie img { width: 8.5rem; height: auto; }
.pie nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.pie a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9375rem; }

/* Directorio */
.directorio-portada { background: var(--verde); color: var(--blanco); padding-block: 1.5rem 2rem; }
.directorio-portada h1 { font-size: clamp(3rem, 12vw, 5rem); }
.directorio-portada p { max-width: 36rem; margin-top: .75rem; font-size: 1.125rem; }
.directorio-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.5rem; }
.directorio-buscar { flex: 1 1 16rem; max-width: 28rem; min-height: 3.25rem; padding: .5rem 1rem; border: 0; border-radius: .5rem; background: var(--blanco); color: var(--tinta); font: inherit; }
.directorio-buscar::placeholder { color: var(--tinta-suave); }
.directorio-abierto { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; font-weight: 600; cursor: pointer; }
.directorio-abierto input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--naranja); }
.directorio-rubros { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.rubro { min-height: 2.75rem; padding: .375rem 1rem; border: 1px solid #9CC4BB; border-radius: .5rem; background: none; color: var(--blanco); font: 600 .9375rem/1.2 var(--texto); cursor: pointer; transition: background-color .15s; }
.rubro:hover { background: var(--verde-oscuro); }
.rubro[aria-pressed="true"] { border-color: var(--blanco); background: var(--blanco); color: var(--verde); }
.directorio-cuerpo { padding-block: 2rem 3.5rem; }
.directorio-lista { display: grid; gap: 0 3rem; }
.negocio { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; align-items: center; min-height: 6.5rem; padding-block: 1rem; border-bottom: 1px solid #C9DAD4; color: inherit; text-decoration: none; }
.negocio[hidden] { display: none; }
.negocio-logo { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: .5rem; overflow: hidden; background: var(--menta); }
.negocio-logo img { width: 100%; height: 100%; object-fit: contain; }
.negocio-inicial { background: var(--color); color: #fff; font: 700 2.25rem/1 var(--rotulo); }
.negocio-nombre { display: block; font: 700 1.625rem/1.1 var(--rotulo); overflow-wrap: anywhere; }
.negocio:hover .negocio-nombre { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }
.negocio-datos { display: flex; flex-wrap: wrap; gap: 0 .875rem; margin-top: .125rem; color: var(--tinta-suave); font-size: .9375rem; }
.negocio-estado { font-weight: 700; }
.negocio-estado--abierto { color: #17693A; }
.negocio-descripcion { display: -webkit-box; margin-top: .25rem; overflow: hidden; color: var(--tinta-suave); font-size: .9375rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.directorio-vacio { padding-block: 1.5rem; color: var(--tinta-suave); font-weight: 600; }
.directorio-vacio[hidden] { display: none; }

@media (min-width: 48rem) {
    .directorio-lista { grid-template-columns: 1fr 1fr; }
    .barra-enlace--ancho { display: inline-flex; }
    .adentro-panel { grid-template-columns: 17rem minmax(0, 1fr); gap: 3.5rem; align-items: center; }
    .mostrador-lados { grid-template-columns: 1fr 1fr; gap: 4rem; }
    .pasos-lista { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    .cierre-interior { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; }
}

@media (min-width: 64rem) {
    .portada-texto { grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 2rem; padding-block: 1.5rem 1.75rem; }
    .portada-texto h1, .portada-lado { grid-column: 1; }
    .proximamente { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 20rem; max-width: none; }
    .proximamente strong { font-size: 3.25rem; }
    .portada h1 { font-size: 5.5rem; }
    .portada-lado { display: flex; align-items: center; justify-content: space-between; gap: 3rem; max-width: none; }
    .portada-lado p { max-width: 40rem; }
    .portada-lado .boton { flex: none; }
    .calle { justify-content: center; gap: .75rem; max-width: 72rem; margin-inline: auto; overflow: visible; }
    .local { flex: 1 1 0; }
    .local-rotulo { font-size: 1.75rem; }
    .adentro-panel { gap: 6rem; grid-template-columns: 17rem minmax(0, 40rem); justify-content: center; }
    .preguntas-interior { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .local-toldo { animation: none; }
    .local-vitrina, .boton, .rubro { transition: none; }
}