/* =====================================================================
   TEMA · Amapola
   Recortes de papel de colores (como los de Matisse) sobre papel blanco.
   Cambiando estas variables cambia el look de TODAS las páginas.
   ===================================================================== */

:root {
  --fucsia: #D1106F;
  --azul: #2338C4;
  --verde: #0B7D59;
  --coral: #FF6A48;
  --limon: #FFD23F;

  /* Colores */
  --fondo: #FFFFFF;        /* papel */
  --fondo-2: #F6F4FA;
  --fondo-3: #ECE8F4;
  --linea: #E6E2EF;
  --linea-2: #CFC9DE;
  --texto: #2A2552;
  --texto-2: #57527A;
  --texto-3: #6B668E;
  --titulo: #1A1446;       /* tinta índigo */
  --acento: var(--fucsia);
  --acento-2: #B50C60;
  --acento-suave: rgba(209, 16, 111, .09);
  --sobre-acento: #FFFFFF;
  --brasa-clara: var(--limon);
  --ok: #0B7D59; --ok-suave: #DFF2EA; --ok-texto: #075C41;
  --alerta: #E8A317; --alerta-suave: #FDF1D4; --alerta-texto: #7A5300;
  --peligro: #C8283A;
  --peligro-suave: #FBE3E6;
  --whatsapp: #0E7468;
  --whatsapp-2: #0B5E54;
  --demo-fondo: #1A1446;
  --demo-texto: #FFFFFF;
  --ticket-fondo: #1A1446;
  --ticket-texto: #FFFFFF;

  /* Tipografías */
  --f-titulo: "Gloock", Georgia, serif;
  --f-texto: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-peso: 400;
  --t-mayus: none;
  --t-espaciado: -.02em;
  --t-alto: 1;
  --marca-tam: 30px;
  --marca-espaciado: -.01em;

  /* Botones y formas */
  --boton-peso: 700;
  --boton-tam: 16px;
  --radio-boton: 999px;
  --radio-chip: 999px;
  --radio: 22px;
  --radio-hoja: 26px;
  --radio-entrada: 14px;
}

/* La marca lleva una estrella recortada adelante */
.marca::before { content: ""; width: 28px; height: 28px; flex: none; background: var(--fucsia); -webkit-mask: var(--m-estrella) center / contain no-repeat; mask: var(--m-estrella) center / contain no-repeat; }
:root { --m-estrella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0l7 31 30-19-18 29 31 9-31 10 18 29-30-19-7 30-8-30-29 19 17-29L0 50l30-9L13 12l29 19z'/%3E%3C/svg%3E");
  --m-alga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M48 98C46 80 30 78 22 64c8 2 16 0 20-6-8-8-22-10-28-24 10 4 20 4 26-2-6-8-12-18-10-30 10 10 16 20 20 28 4-8 10-18 20-28 2 12-4 22-10 30 6 6 16 6 26 2-6 14-20 16-28 24 4 6 12 8 20 6-8 14-24 16-26 34z'/%3E%3C/svg%3E");
  --m-hoja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2c20 18 28 43 10 68-5 8-8 18-10 28-2-10-5-20-10-28C22 45 30 20 50 2z'/%3E%3C/svg%3E");
  --m-sol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4c24-2 46 18 44 44 4 26-18 50-44 46C24 98 4 76 8 50 2 24 26 6 50 4z'/%3E%3C/svg%3E");
}
@media (max-width: 760px) { .marca { flex-direction: row; align-items: center; gap: 8px; } }
.franja { display: none; }
.cabecera { border-bottom: 0; }

/* La promo del día: un recorte amarillo */
.chapa { background: var(--limon); border: 0; color: var(--titulo); }
.chapa__detalle { color: #5B4A0A; }
.chapa__precio { color: var(--titulo); font-family: var(--f-texto); font-weight: 800; font-size: 22px; }
.chapa__sello { background: var(--fucsia); color: #fff; font-family: var(--f-texto); font-weight: 800; }

/* =====================================================================
   PORTADA (solo index.html)
   ===================================================================== */
.portada { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: 10px var(--lado) 64px; min-height: calc(100vh - 110px); min-height: calc(100svh - 110px); overflow-x: clip; }
.portada__titulo { font-size: clamp(62px, 8.4vw, 128px); line-height: .94; letter-spacing: -.025em; }
.portada__titulo em { font-style: normal; color: var(--fucsia); display: block; }
.portada__bajada { font-size: 19px; max-width: 36ch; color: var(--texto-2); margin: 26px 0 30px; }
.portada__acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.portada__datos { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 34px; font-size: 14px; color: var(--texto-2); }
.portada__datos b { display: block; color: var(--titulo); font-size: 15px; }

/* El collage: foto en arco y recortes de papel que caen y se mecen */
.collage { position: relative; justify-self: center; width: min(100%, 540px); aspect-ratio: 4 / 5; }
.collage__foto { position: absolute; inset: 6% 8% 0 6%; border-radius: 220px 220px 28px 28px; overflow: hidden; background: var(--fondo-3); }
.collage__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recorte { position: absolute; display: block; transform-origin: 50% 90%; animation: cae .9s var(--ease) both, mecer var(--t, 6s) ease-in-out infinite alternate; }
.recorte svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(26, 20, 70, .12)); }
@keyframes cae { from { opacity: 0; transform: translateY(-40px) rotate(-18deg) scale(.85); } }
@keyframes mecer { from { rotate: -4deg; } to { rotate: 4deg; } }
.r1 { width: 36%; left: -10%; top: 4%; --t: 5s; animation-delay: .1s, 1s; }
.r2 { width: 26%; right: -4%; top: -2%; --t: 7s; animation-delay: .25s, 1.1s; }
.r3 { width: 30%; right: -12%; bottom: 18%; --t: 6s; animation-delay: .4s, 1.2s; }
.r4 { width: 22%; left: -4%; bottom: 6%; --t: 8s; animation-delay: .55s, 1.3s; }
.collage .chapa { position: absolute; left: -12%; bottom: -4%; z-index: 2; width: min(290px, 80%); border-radius: 58% 42% 50% 50% / 48% 54% 46% 52%; padding: 30px 30px 30px 24px; box-shadow: 0 12px 24px -10px rgba(26, 20, 70, .3); animation: cae 1s .8s var(--ease) both; }
@media (max-width: 860px) {
  .portada { grid-template-columns: 1fr; min-height: 0; padding-top: 0; }
  .collage { order: -1; width: min(86%, 420px); }
  .collage .chapa { left: -8%; width: min(230px, 70%); padding: 22px 22px 22px 18px; }
  .collage .chapa__titulo { font-size: 19px; }
  .collage .chapa__detalle { display: none; }
  .portada__bajada { font-size: 17px; }
}

/* Tratamientos destacados: cada uno es un recorte de su color */
.trat { color: #fff; position: relative; }
.trat--0 { background: var(--fucsia); }
.trat--1 { background: var(--azul); }
.trat--2 { background: var(--verde); }
.trat--3 { background: var(--coral); color: var(--titulo); }
.trat .titulo, .trat__pie b { color: inherit; }
.trat__txt > span, .trat__pie { color: inherit; opacity: .9; }
.trat__txt { position: relative; }
.trat__txt::after { content: ""; position: absolute; right: -20px; bottom: -30px; width: 120px; height: 120px; background: currentColor; opacity: .18; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transition: rotate .8s var(--ease); pointer-events: none; }
.trat--0 .trat__txt::after { --m: var(--m-estrella); }
.trat--1 .trat__txt::after { --m: var(--m-alga); }
.trat--2 .trat__txt::after { --m: var(--m-hoja); }
.trat--3 .trat__txt::after { --m: var(--m-sol); }
.trat:hover .trat__txt::after { rotate: 25deg; }

/* Menú de tratamientos y turnos */
.plato { background: var(--fondo-2); border-color: transparent; }
.plato:hover { border-color: var(--linea-2); background: var(--fondo-2); }
.plato__precio { font-family: var(--f-texto); font-weight: 800; font-size: 22px; color: var(--titulo); }
.plato--grande .plato__precio { font-size: 28px; }
.marca-plato--casa { background: #FDE3EF; color: #A30C57; }
.categorias button { font-family: var(--f-texto); font-weight: 700; font-size: 16px; letter-spacing: 0; }
.ticket .btn { background: var(--fucsia); color: #fff; }
.ticket .btn:hover { background: var(--acento-2); }
.dueno { position: relative; overflow: hidden; background: var(--azul); }
.dueno::after { content: ""; position: absolute; right: -40px; top: -60px; width: 240px; height: 240px; background: var(--limon); -webkit-mask: var(--m-alga) center / contain no-repeat; mask: var(--m-alga) center / contain no-repeat; opacity: .9; pointer-events: none; }
.dueno > * { position: relative; z-index: 1; }
.dueno .btn { background: #fff; color: var(--azul); }

/* =====================================================================
   PANEL DE LA DUEÑA
   ===================================================================== */
body.panel {
  --fondo: #F3F2F7;
  --fondo-2: #FFFFFF;
  --fondo-3: #ECE9F3;
  --panel-lateral: #1A1446;
  --panel-lateral-texto: #BDB8DA;
  --panel-lateral-titulo: #FFFFFF;
  --acento-texto: #A30C57;
  --cabecera-fondo: #F3F2F7;
}
body.panel .lateral .marca::before { background: var(--limon); }

/* Profesionales: cada una es un recorte de papel de su color */
.persona .avatar { width: 58px; height: 58px; border-radius: 0; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; --m: var(--m-sol); }
.persona:nth-child(2) .avatar { --m: var(--m-hoja); }
.persona:nth-child(4) .avatar { --m: var(--m-hoja); }
.persona:nth-child(3) .avatar { --m: var(--m-sol); }
.persona:nth-child(1) .avatar { --m: var(--m-estrella); }
@media (max-width: 420px) { .marca::before { width: 22px; height: 22px; } }