/* =====================================================================
   AUTOSERVICIO LA PLAYITA · estilos
   Estilo "pop de playa": amarillo de sol, coral y agua, formas
   redondas, botones que se hunden al pulsarlos y pequeños movimientos
   (rayos de sol, ola, cinta de productos). Mobile first.
   ===================================================================== */

:root {
  --sol: #FFD84D;
  --sol-claro: #FFF1B8;
  --coral: #FF7A5C;
  --agua: #2EC4B6;
  --agua-oscuro: #0B7A70;
  --agua-claro: #DDF6F2;
  --tinta: #1B2340;
  --crema: #FFF8EC;
  --blanco: #fff;
  --texto-suave: #4F556B;
  --titulos: "Bricolage Grotesque", system-ui, sans-serif;
  --radio: 1.5rem;
  --sombra: .25rem .25rem 0 var(--tinta);       /* sombra "pegatina" */
  --rebote: cubic-bezier(.34, 1.56, .64, 1);     /* movimiento con rebote */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; font: 1.0625rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tinta); background: var(--crema); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2 { font-family: var(--titulos); font-weight: 800; line-height: .98; letter-spacing: -.03em; margin: 0 0 .5em; }
h2 { font-size: clamp(2.2rem, 8vw, 3.4rem); }
:focus-visible { outline: 3px solid var(--agua-oscuro); outline-offset: 3px; border-radius: .5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contenedor { width: min(100% - 2rem, 66rem); margin-inline: auto; }

/* ---------- Franja "Web de ejemplo" (se borra en una web real) ---------- */
.demo-franja {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .75rem;
  padding: .4rem 1rem; font-size: .8125rem; text-align: center; background: #111; color: #ddd;
}
.demo-franja p { margin: 0; }
.demo-franja a { color: #fff; }
/* Botón para volver a la web principal: va el primero (a la izquierda) */
.demo-franja__btn {
  order: -1; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .3rem 1rem;
  border-radius: 99px; background: #fff; color: #111 !important; font-weight: 700; text-decoration: none;
  transition: transform .3s, background-color .3s;
}
.demo-franja__btn:hover { transform: translateX(-3px); background: #ffe680; }

/* ---------- Cabecera: una píldora flotante ---------- */
.cabecera { position: sticky; top: .6rem; z-index: 10; padding-inline: .6rem; margin-top: .6rem; }
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem;
  width: min(100%, 66rem); margin-inline: auto; padding-inline: 1.25rem .5rem;
  background: var(--tinta); color: #fff; border-radius: 99px; box-shadow: 0 .5rem 1.5rem rgb(27 35 64 / .2);
}
.logo { font-family: var(--titulos); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.logo__sello { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .5rem; background: var(--sol); color: var(--tinta); border-radius: 99px; }
.cabecera__tel { font-weight: 700; text-decoration: none; padding: .55rem 1rem; border-radius: 99px; background: var(--sol); color: var(--tinta); transition: transform .3s var(--rebote); }
.cabecera__tel:hover { transform: scale(1.06) rotate(-2deg); }

/* ---------- Botones: se levantan al pasar por encima y se hunden al pulsar ---------- */
.botones { display: flex; flex-wrap: wrap; gap: .85rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; padding: .85rem 1.5rem; min-height: 3rem;
  border: 2px solid var(--tinta); border-radius: 99px; background: var(--blanco); box-shadow: var(--sombra);
  font: 800 1.05rem/1 var(--titulos); text-decoration: none; color: var(--tinta);
  transition: transform .2s var(--rebote), box-shadow .2s var(--rebote);
}
.btn:hover { transform: translate(-.1rem, -.1rem); box-shadow: .35rem .35rem 0 var(--tinta); }
.btn:active { transform: translate(.25rem, .25rem); box-shadow: 0 0 0 var(--tinta); }
.btn--negro { background: var(--tinta); color: var(--sol); }
.btn--whatsapp { background: #25D366; border-color: #25D366; color: var(--tinta); box-shadow: none; }

/* ---------- Portada ---------- */
.portada {
  position: relative; padding-block: 3rem 1rem; margin-top: -4.1rem; padding-top: 7rem;
  background:
    radial-gradient(40rem 30rem at 90% 0%, rgb(255 255 255 / .55), transparent 60%),
    var(--sol);
}
.portada__grid { display: grid; gap: 3rem; }
.portada h1 { font-size: clamp(2.8rem, 12vw, 5.6rem); }
.portada__texto { font-size: 1.15rem; max-width: 32rem; color: #3a3420; }

/* Palabra subrayada con una onda que se dibuja sola */
.subrayado { position: relative; white-space: nowrap; color: var(--tinta); }
.subrayado::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .22em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 8c10-6 18-6 28 0s18 6 28 0 18-6 28 0 18 6 28 0' fill='none' stroke='%23FF7A5C' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") left / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); animation: dibujar 1.1s .5s cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes dibujar { to { clip-path: inset(0 0 0 0); } }

/* Foto con rayos de sol girando detrás */
.portada__marco { position: relative; isolation: isolate; width: min(100%, 26rem); margin: 0 auto 2rem; }
.portada__marco::before {
  content: ""; position: absolute; inset: -35%; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(rgb(255 255 255 / .55) 0deg 9deg, transparent 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%);
          mask: radial-gradient(circle, #000 25%, transparent 68%);
  animation: girar 60s linear infinite;
}
.portada__foto {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 75%;
  border: 3px solid var(--tinta); border-radius: 2rem; box-shadow: .6rem .6rem 0 var(--tinta);
  transform: rotate(2deg); transition: transform .6s var(--rebote);
}
.portada__marco:hover .portada__foto { transform: rotate(0deg) scale(1.02); }
.pegatina {
  position: absolute; left: -1rem; bottom: -1.5rem; display: grid; place-items: center; margin: 0;
  width: 6.5rem; height: 6.5rem; border-radius: 50%; border: 3px solid var(--tinta);
  background: var(--coral); color: var(--tinta); text-align: center;
  font: 800 .8rem/1 var(--titulos); text-transform: uppercase; letter-spacing: .04em;
  animation: flotar 4s ease-in-out infinite;
}
.pegatina strong { display: block; font-size: 1.9rem; letter-spacing: -.02em; margin-block: .1rem; }
@keyframes girar { to { transform: rotate(1turn); } }
@keyframes flotar { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-.5rem); } }

/* Estado abierto / cerrado */
.estado {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.25rem; padding: .4rem .9rem;
  background: var(--tinta); color: #fff; border-radius: 99px; font-weight: 600; font-size: .9375rem;
}
.estado::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: #ff6b5e; }
.estado--abierto::before { background: #4ee08a; animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgb(78 224 138 / .7); } 50% { box-shadow: 0 0 0 .35rem rgb(78 224 138 / 0); } }

/* Ola que se mueve bajo la portada */
.ola {
  height: 2.5rem; margin-top: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40'%3E%3Cpath d='M0 0h160v18c-20 0-20 14-40 14S100 18 80 18 60 32 40 32 20 18 0 18z' fill='%23FFD84D'/%3E%3C/svg%3E") 0 0 / 10rem 100% repeat-x;
  animation: ola 8s linear infinite;
}
@keyframes ola { to { background-position: 10rem 0; } }

/* Cinta de productos */
.cinta { overflow: hidden; margin-block: 1.5rem .5rem; padding-block: .9rem; background: var(--tinta); color: var(--sol); transform: rotate(-1.5deg); }
.cinta__pista { display: flex; width: max-content; animation: cinta 30s linear infinite; }
.cinta__pista span { flex: none; padding-right: 2rem; font: 800 1.5rem/1 var(--titulos); white-space: nowrap; word-spacing: .4rem; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
.seccion { padding-block: 4rem; }
.seccion--gris { background: var(--agua-claro); border-radius: 2.5rem; margin-inline: .5rem; }
.seccion--amarilla { background: var(--sol); border-radius: 2.5rem; margin-inline: .5rem; }
.nota { font-size: .9375rem; color: var(--texto-suave); }

/* ---------- Etiqueta de precio ---------- */
.etiqueta {
  margin: 0; padding: .4rem .75rem; min-width: 5rem; text-align: center;
  font: 800 1.35rem/1 var(--titulos); font-variant-numeric: tabular-nums;
  background: var(--sol); border-radius: 99px;
}
.etiqueta--oferta { background: var(--coral); color: var(--tinta); }
.etiqueta del { font-size: .9rem; font-weight: 600; opacity: .75; }

/* ---------- Ofertas: tarjetas tipo pegatina, un poco torcidas ---------- */
.ofertas { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.oferta {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem; border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--blanco);
  box-shadow: .4rem .4rem 0 var(--tinta); transform: rotate(-1deg);
  transition: transform .4s var(--rebote), box-shadow .4s var(--rebote);
}
.oferta:nth-child(even) { transform: rotate(1deg); }
.oferta:hover { transform: rotate(0) translateY(-.3rem); box-shadow: .55rem .7rem 0 var(--tinta); }
.oferta__nombre { margin: 0; font-weight: 700; }
.oferta__nombre span { display: block; font-weight: 400; color: var(--texto-suave); font-size: .9375rem; }

/* ---------- Buscador y filtros ---------- */
.buscador { margin-block: 1.5rem 1rem; }
.buscador label { display: block; font-weight: 700; margin-bottom: .4rem; }
.buscador input {
  width: 100%; padding: .9rem 1.25rem; font: inherit; border: 2px solid var(--tinta); border-radius: 99px;
  background: var(--blanco); box-shadow: var(--sombra); transition: box-shadow .2s;
}
.buscador input:focus { outline: none; box-shadow: .25rem .25rem 0 var(--agua-oscuro); border-color: var(--agua-oscuro); }
.filtros { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem .25rem .75rem; scrollbar-width: thin; }
.filtros button {
  flex: none; padding: .55rem 1rem; min-height: 2.75rem; border: 2px solid var(--tinta); border-radius: 99px;
  background: var(--blanco); font: 600 .9375rem/1 system-ui, sans-serif; color: var(--tinta); cursor: pointer;
  transition: background-color .2s, color .2s, transform .3s var(--rebote);
}
.filtros button:hover { transform: translateY(-2px); }
.filtros button[aria-pressed="true"] { background: var(--tinta); color: var(--sol); }
.resultado { font-size: .9375rem; color: var(--texto-suave); margin: .5rem 0; }

/* ---------- Lista de productos ---------- */
.lista { list-style: none; padding: .5rem; margin: 0; background: var(--blanco); border-radius: var(--radio); border: 2px solid var(--tinta); }
.producto {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .75rem;
  padding: .75rem; border-radius: 1rem; transition: background-color .2s;
}
.producto:hover { background: var(--crema); }
.producto + .producto { border-top: 1px dashed #e4dfd2; }
.producto p { margin: 0; }
.producto__nombre { font-weight: 600; line-height: 1.25; }
.producto__detalle { font-size: .875rem; color: var(--texto-suave); }
.anadir {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--tinta); cursor: pointer;
  background: var(--agua); color: var(--tinta); font: 800 1.5rem/1 var(--titulos);
  transition: transform .3s var(--rebote), background-color .2s;
}
.anadir:hover { transform: rotate(90deg); background: var(--sol); }
.anadir.pop { animation: pop .45s var(--rebote); }
@keyframes pop { 40% { transform: scale(1.35); background: var(--coral); } }

/* ---------- Cómo pedir: tres pasos con número grande ---------- */
.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 2rem 0; display: grid; gap: 1rem; }
.pasos li {
  counter-increment: paso; position: relative; padding: 1.25rem 1.25rem 1.25rem 4.75rem;
  background: var(--blanco); border: 2px solid var(--tinta); border-radius: var(--radio);
}
.pasos li::before {
  content: counter(paso); position: absolute; left: 1rem; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--sol); border: 2px solid var(--tinta); font: 800 1.35rem/1 var(--titulos);
}
.servicios { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.servicios li {
  padding: 1rem 1.1rem; background: var(--agua-claro); border-radius: var(--radio); font-weight: 600;
  transition: transform .4s var(--rebote);
}
.servicios li:hover { transform: translateY(-.25rem) rotate(-1deg); }

/* ---------- Dónde estamos ---------- */
.donde { display: grid; gap: 2.5rem; }
.donde address { font-style: normal; font-weight: 600; }
.fotos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.fotos li:first-child { grid-column: span 2; }
.fotos img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 1.25rem; border: 2px solid var(--tinta); transition: transform .5s var(--rebote);
}
.fotos li:nth-child(2) img { transform: rotate(-2deg); }
.fotos li:nth-child(3) img { transform: rotate(2deg); }
.fotos img:hover { transform: rotate(0) scale(1.03); }

/* ---------- Pie ---------- */
.pie { margin-top: 3rem; background: var(--tinta); color: #eee; padding-block: 2.5rem 7rem; font-size: .9375rem; border-radius: 2.5rem 2.5rem 0 0; }
.creditos { font-size: .8125rem; opacity: .8; }

/* ---------- Barra fija del pedido: sube con rebote al aparecer ---------- */
.pedido {
  position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem .75rem .75rem 1.25rem;
  background: var(--tinta); color: #fff; border-radius: 1.75rem; box-shadow: 0 .75rem 2rem rgb(27 35 64 / .35);
  max-width: 40rem; margin-inline: auto; animation: subir .5s var(--rebote);
}
.pedido[hidden] { display: none; }
.pedido p { margin: 0; flex: 1; }
.pedido.pop strong { display: inline-block; animation: pop-texto .4s var(--rebote); }
.pedido__vaciar { background: none; border: 0; color: #ccc; text-decoration: underline; font: inherit; cursor: pointer; min-height: 2.75rem; }
@keyframes subir { from { transform: translateY(150%); } }
@keyframes pop-texto { 40% { transform: scale(1.15); color: var(--sol); } }

/* ---------- Aparecer al hacer scroll (lo activa app.js) ---------- */
.aparece { opacity: 0; transform: translateY(2rem); transition: opacity .7s ease, transform .8s var(--rebote); transition-delay: var(--retraso, 0s); }
.aparece.visible { opacity: 1; transform: none; }

/* ---------- Pantallas medianas y grandes ---------- */
@media (min-width: 48rem) {
  .portada { padding-top: 8rem; }
  .portada__grid { grid-template-columns: 1.1fr .9fr; align-items: center; }
  .portada__marco { margin-bottom: 3rem; }
  .pegatina { width: 7.5rem; height: 7.5rem; left: -2.5rem; }
  .ofertas { grid-template-columns: repeat(3, 1fr); }
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .pasos li { padding: 4.5rem 1.5rem 1.5rem; }
  .pasos li::before { left: 1.5rem; top: 1.25rem; translate: none; }
  .servicios { grid-template-columns: repeat(4, 1fr); }
  .lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; padding: .75rem; }
  .producto + .producto { border-top: 0; }
  .donde { grid-template-columns: 1fr 1fr; align-items: center; }
  .seccion--gris, .seccion--amarilla { margin-inline: 1.5rem; }
}

/* ---------- Menos movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .subrayado::after { clip-path: none; }
  .aparece { opacity: 1; transform: none; }
}