/* Respaldo. La fuente de verdad es la seccion "Brand" de appsettings.json.
   No editar aqui: se sobreescribe desde _Host.cshtml. */
:root{
  --navy:#2E394C;
  --navy-2:#232c3b;
  --taupe:#C3A38D;
  --taupe-dk:#a9856c;
  --cream:#EEDBC6;
  --paper:#FBF7F1;
  --ink:#221d18;
  --muted:#6f6459;
  --line:#e6dccd;
  --white:#fff;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--paper);color:var(--ink);font-family:'Work Sans',sans-serif;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;margin:0;color:var(--ink);}
p{margin:0 0 12px;}
a{text-decoration:none;color:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px;}
.eyebrow{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:500;color:var(--taupe-dk);}
.eyebrow.taupe{color:var(--taupe-dk);}

/* NAV */
/* Barra superior OSCURA: es el diseno aprobado por el cliente (Opcion B).
   El fondo va en .site-nav (ancho completo), no en .nav-inner (que esta
   limitado por .wrap), asi el navy cubre toda la pantalla en cualquier ancho. */
.site-nav{background:var(--navy);}
.site-nav .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:24px;}
.logo{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.35rem;color:#fff;display:flex;align-items:center;gap:10px;white-space:nowrap;}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--taupe);}
/* El logo subido puede venir en cualquier medida — se limita a una altura
   fija para que nunca desalinee la barra ni el pie, sea cual sea el archivo
   que suba el cliente (nunca se recorta ni se distorsiona: solo se acota su
   alto, el ancho se ajusta solo). */
.logo-img{height:28px;width:auto;max-width:160px;object-fit:contain;display:block;}
.navlinks{display:flex;gap:30px;font-size:.95rem;font-weight:500;}
.navlinks a{color:rgba(255,255,255,.72);padding-bottom:4px;border-bottom:2px solid transparent;}
.navlinks a:hover{color:#fff;}
.navlinks a.active{color:#fff;border-bottom-color:var(--taupe);}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:600;font-size:.92rem;}
/* Sobre la barra navy el boton va en blanco (navy sobre navy no se veria). */
.btn-wa{background:#fff;color:var(--navy);}
.btn-wa:hover{background:var(--cream);}

/* HERO */
.hero{padding:74px 0 96px;position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;top:-140px;right:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 30% 30%, var(--cream), transparent 70%);opacity:.9;z-index:0;}
.hero-inner{position:relative;z-index:1;max-width:760px;}
.hero .eyebrow{color:var(--taupe-dk);margin-bottom:18px;display:block;}
.hero h1{font-size:3rem;line-height:1.1;letter-spacing:-.01em;}
.hero h1 em{font-style:normal;color:var(--taupe-dk);}
.hero p.lede{font-size:1.1rem;color:var(--muted);max-width:52ch;margin-top:22px;line-height:1.6;}
.hero .ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}
.line-pills{display:flex;gap:10px;margin-top:36px;}
.pill-static{font-family:'JetBrains Mono',monospace;font-size:.76rem;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--white);cursor:pointer;transition:background-color .15s ease,border-color .15s ease;}
.pill-static.m{color:var(--navy);}
.pill-static.e{color:var(--taupe-dk);}
.pill-static:hover{border-color:var(--taupe);}
.pill-static:focus-visible{outline:2px solid var(--taupe);outline-offset:2px;}

/* STATS */
.stats{background:var(--navy);padding:36px 0;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.stat b{font-family:'Fraunces',Georgia,serif;font-size:2rem;color:#fff;font-weight:600;display:block;}
.stat span{color:#b9c2cf;font-size:.86rem;}

/* SECTION HEAD */
.section-head{max-width:640px;margin-bottom:44px;}
.section-head h2{font-size:2rem;}
.section-head p{color:var(--muted);margin-top:12px;font-size:1rem;}

/* SERVICES PREVIEW */
.services-preview,.folio-preview{padding:88px 0;}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.svc-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:34px;}
.svc-card.marketing{border-top:4px solid var(--navy);}
.svc-card.eventos{border-top:4px solid var(--taupe);}
.svc-card .tag{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.06em;padding:5px 12px;border-radius:999px;display:inline-block;margin-bottom:16px;}
.svc-card .tag.m{color:var(--navy);background:#eef1f5;}
.svc-card .tag.e{color:var(--taupe-dk);background:#f7efe9;}
.svc-card h3{font-size:1.35rem;margin-bottom:10px;}
.svc-card p{color:var(--muted);}
.svc-card .more{margin-top:8px;font-weight:600;font-size:.9rem;color:var(--navy);display:inline-block;}

/* PORTFOLIO GRID (shared: preview + full) */
.folio-grid,.grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.grid-cards{grid-template-columns:repeat(3,1fr);}
.pf{border-radius:12px;overflow:hidden;position:relative;height:210px;display:flex;align-items:flex-end;padding:16px;color:#fff;}
.pf .pill,.thumb .pill{font-family:'JetBrains Mono',monospace;font-size:.66rem;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.2);}
.pf .t,.thumb .t{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.05rem;margin-top:8px;}
.pf-m{background:linear-gradient(160deg,#2E394C,#1a2230);}
.pf-e{background:linear-gradient(160deg,#C3A38D,#9c7c65);}

/* TASK-012: la grilla de vistas previas de portada se adapta a cuantos casos
   hay realmente — nunca deja columnas vacias (con 2, se ven 2 anchas y
   centradas en vez de 2 pegadas a la izquierda de una grilla de 4). */
.folio-grid.cols-2{grid-template-columns:repeat(2,minmax(260px,460px));justify-content:center;}
.folio-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.folio-cta{text-align:center;margin-top:32px;}

/* CTA BANNER */
.cta-banner{background:var(--cream);padding:64px 0;text-align:center;}
.cta-banner h2{font-size:1.9rem;max-width:20ch;margin:0 auto;}
.cta-banner p{color:var(--muted);margin-top:12px;}
.cta-banner .mud-button-root{margin-top:22px;}

/* FOOTER */
.site-footer{background:var(--navy-2);color:#cbd2dc;padding:52px 0 32px;margin-top:20px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;}
.foot-grid h4{color:#fff;font-family:'Work Sans';font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;font-weight:600;}
.foot-grid a{display:block;font-size:.9rem;color:#aab3c0;padding:4px 0;}
.foot-desc{color:#9aa4b3;font-size:.88rem;margin-top:12px;max-width:32ch;}
.foot-bottom{border-top:1px solid #38435a;margin-top:36px;padding-top:18px;font-size:.8rem;color:#8892a1;display:flex;justify-content:space-between;}

/* PAGE HEAD (servicios/portafolio/contacto) */
.page-head{padding:54px 0 32px;}
.page-head h1{font-size:2.3rem;max-width:18ch;}
.page-head p.lede{color:var(--muted);margin-top:12px;max-width:56ch;font-size:1rem;}
.contact-head{text-align:left;padding-bottom:70px;}

/* SERVICIOS FULL */
.services-full{padding-bottom:80px;}
/* TASK-012: las dos lineas ya no van en columnas lado a lado (una quedaba
   mucho mas larga que la otra segun cuantos servicios tuviera) — cada
   linea-bloque es ahora una seccion apilada a ancho completo. */
.svc-grid-2{display:flex;flex-direction:column;gap:8px;}
.linea-bloque + .linea-bloque{margin-top:48px;padding-top:48px;border-top:1px solid var(--line);}
.svc-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:8px;}
.line-title{font-size:1.4rem;margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--line);}
.line-title.m{color:var(--navy);border-color:var(--navy);}
.line-title.e{color:var(--taupe-dk);border-color:var(--taupe);}
.svc-row{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
.svc-row h3{font-size:1.02rem;font-family:'Work Sans';font-weight:600;}
.svc-row p{font-size:.9rem;color:var(--muted);margin-top:4px;}
.svc-row .price{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--muted);white-space:nowrap;}

/* PORTAFOLIO FULL */
.folio-full{padding-bottom:80px;}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px;}
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.thumb{height:190px;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff;}
.card .body{padding:16px 18px 20px;}
.card .body .cat{font-family:'JetBrains Mono',monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.card .body p{font-size:.9rem;color:var(--ink);margin-top:6px;}

/* TESTIMONIALS */
.testimonials{padding:88px 0;}
.testi-summary{display:flex;align-items:center;gap:14px;margin-top:16px;}
.testi-avg{font-family:'Fraunces',Georgia,serif;font-size:2rem;font-weight:600;color:var(--navy);}
.testi-stars{color:var(--taupe-dk);font-size:1rem;letter-spacing:2px;}
.testi-count{display:block;font-size:.82rem;color:var(--muted);margin-top:2px;}
.testi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch;}
.testi-card{display:flex;flex-direction:column;height:100%;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px;}
.testi-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.testi-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;}
.testi-avatar-fallback{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.1rem;flex-shrink:0;}
.testi-author{font-weight:600;font-size:.92rem;color:var(--ink);}
.testi-text{font-size:.9rem;color:var(--muted);line-height:1.55;flex:1;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.testi-cat{margin-top:auto;padding-top:14px;font-family:'JetBrains Mono',monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--taupe-dk);}

/* BLOG LIST */
.blog-list{padding-bottom:80px;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
.blog-card{display:flex;flex-direction:column;height:100%;background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.blog-cover{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center top;background-color:var(--cream);}
.blog-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 22px;}
.blog-body .cat{font-family:'JetBrains Mono',monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--taupe-dk);}
.blog-body h3{font-size:1.1rem;margin-top:8px;}
.blog-body .excerpt{font-size:.9rem;color:var(--muted);margin-top:8px;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.blog-body .date{font-family:'JetBrains Mono',monospace;font-size:.76rem;color:var(--muted);margin-top:14px;}
.blog-empty{color:var(--muted);text-align:center;padding:40px 0;}
.blog-pager{display:flex;gap:8px;justify-content:center;margin-top:40px;}
.blog-pager a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line);font-size:.9rem;font-weight:600;color:var(--navy);}
.blog-pager a.active{background:var(--navy);color:#fff;border-color:var(--navy);}

/* BLOG ARTICLE */
.blog-article-cover{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center top;background-color:var(--cream);}
.blog-article-body{max-width:760px;padding:44px 0 80px;}
.blog-article-body h1{font-size:2.2rem;margin-top:14px;}
.blog-article-date{display:block;font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--muted);margin-top:10px;}
.blog-content{margin-top:32px;font-size:1.02rem;line-height:1.7;color:var(--ink);}
.blog-content h2{font-size:1.5rem;margin-top:32px;margin-bottom:12px;}
.blog-content h3{font-size:1.2rem;margin-top:24px;margin-bottom:10px;}
.blog-content p{margin-bottom:16px;}
.blog-content a{color:var(--taupe-dk);text-decoration:underline;}
.blog-content ul,.blog-content ol{margin:0 0 16px;padding-left:22px;}
.blog-content li{margin-bottom:6px;}
.blog-content strong{font-weight:700;}

/* CARRUSEL */
.carrusel{position:relative;}
.carrusel-viewport{overflow:hidden;border-radius:12px;outline-offset:2px;}
.carrusel-slides{display:flex;height:100%;transition:transform .35s ease;}
.carrusel-slide{flex:0 0 100%;height:100%;}
.carrusel-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.carrusel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;}
.carrusel-arrow.prev{left:10px;}
.carrusel-arrow.next{right:10px;}
.carrusel-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:2;}
.carrusel-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;background:rgba(255,255,255,.55);cursor:pointer;}
.carrusel-dot.active{background:#fff;}
@media (prefers-reduced-motion: reduce){
  .carrusel-slides{transition:none;}
  .carrusel-triple-grid{transition:none;}
}

/* CARRUSEL — estilo "triple" (TASK-012): 3 tarjetas a la vez en vez de una
   sola imagen grande, para que se note que es un carrusel y no una foto fija. */
.carrusel-triple-viewport{overflow:hidden;border-radius:12px;}
.carrusel-triple-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;transition:opacity .25s ease;}
.carrusel-triple-card{position:relative;border-radius:12px;overflow:hidden;background:var(--cream);}
.carrusel-triple-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.carrusel-triple .carrusel-dots{position:static;margin-top:16px;}
@media (max-width:900px){
  .carrusel-triple-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .carrusel-triple-grid{grid-template-columns:1fr;}
}

/* ADMIN — VISIBILIDAD (TASK-009) */
.fila-oculta{opacity:.55;}

/* SERVICIOS — BLOQUES POR LINEA (TASK-009, reemplaza los style="" en linea) */
.linea-bloque{}
/* TASK-012: la categoria ya no parte la grilla en filas (una categoria con
   un solo servicio quedaba sola en su propia fila, con dos columnas de
   hueco al lado) — ahora todos los servicios de la linea van en UNA sola
   grilla de 3, y la categoria se muestra como etiqueta dentro de cada
   tarjeta. */
.svc-card-categoria{display:block;font-family:'JetBrains Mono',monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px;}
.svc-row.con-media{flex-direction:column;align-items:stretch;}
.svc-row-media{margin-bottom:12px;}
.svc-row-content{display:flex;justify-content:space-between;gap:16px;width:100%;}

/* PORTAFOLIO — FILTRO DE DOS NIVELES (TASK-009) */
.filtro-categorias{display:flex;gap:8px;flex-wrap:wrap;margin:-12px 0 28px;}

/* GALERIA (TASK-011) */
.galeria-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.galeria-tile{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--cream);outline-offset:3px;}
.galeria-tile.destacado{grid-column:span 2;}
.galeria-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.galeria-tile-info{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.7));opacity:1;transition:opacity .2s ease;}
.galeria-tile-video{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.6);color:#fff;font-size:.72rem;padding:4px 10px;border-radius:999px;font-family:'JetBrains Mono',monospace;z-index:1;}
.galeria-tile-cat{font-family:'JetBrains Mono',monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--cream);}
.galeria-tile-title{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.1rem;margin-top:4px;}
@media (hover:hover){
  .galeria-tile-info{opacity:0;}
  .galeria-tile:hover .galeria-tile-info,.galeria-tile:focus-visible .galeria-tile-info{opacity:1;}
}

.galeria-trigger{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--cream);display:block;}

.galeria-visor{position:fixed;inset:0;background:rgba(20,16,12,.94);z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;}
.galeria-visor-imagen{max-width:min(1100px,90vw);max-height:70vh;display:flex;align-items:center;justify-content:center;}
.galeria-visor-imagen img,.galeria-visor-imagen video{max-width:100%;max-height:70vh;width:auto;height:auto;object-fit:contain;border-radius:8px;}
.galeria-visor-cerrar{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:1.2rem;cursor:pointer;}
.galeria-visor-flecha{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;}
.galeria-visor-flecha.prev{left:20px;}
.galeria-visor-flecha.next{right:20px;}
.galeria-visor-pie{margin-top:18px;text-align:center;color:#fff;}
.galeria-visor-titulo{font-family:'Fraunces',Georgia,serif;font-size:1.1rem;display:block;}
.galeria-visor-contador{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:#cbb;display:block;margin-top:4px;}

/* SERVICIOS — presentacion pareja (TASK-011) */
.svc-card-pareja{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--white);}
.svc-card-cover{position:relative;aspect-ratio:16/10;background:var(--cream);cursor:pointer;}
.svc-card-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.svc-card-cover-vacio{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;}
.svc-card-fotos-badge{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:.72rem;padding:4px 10px;border-radius:999px;font-family:'JetBrains Mono',monospace;}
.svc-card-body{padding:18px 20px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;}

/* CARRUSEL DE PORTADA (TASK-011) */
.hero-carrusel{padding:88px 0;}
.hero-carrusel-item{display:flex;flex-direction:column;}
.hero-carrusel-item + .hero-carrusel-item{margin-top:44px;}
.hero-carrusel-rotulo{display:block;margin-bottom:14px;}
.hero-carrusel-item .carrusel-viewport{aspect-ratio:16/9;}
.hero-carrusel-item .carrusel-slide{position:relative;}
.hero-carrusel-info{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:40px 24px 20px;color:#fff;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.72) 85%);}
.hero-carrusel-info h3{font-size:1.2rem;color:#fff;margin:0;}
.hero-carrusel-info .price{font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--cream);white-space:nowrap;}

/* RESPONSIVE */
@media (max-width:900px){
  .svc-grid{grid-template-columns:1fr;}
  .svc-cards-grid{grid-template-columns:repeat(2,1fr);}
  .folio-grid,.grid-cards{grid-template-columns:repeat(2,1fr);}
  .folio-grid.cols-3,.folio-grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .testi-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:2.2rem;}
  .galeria-grid{grid-template-columns:repeat(2,1fr);}
  .galeria-tile.destacado{grid-column:span 2;}
}
@media (max-width:600px){
  .wrap{padding:0 20px;}
  .svc-cards-grid{grid-template-columns:1fr;}
  .folio-grid,.grid-cards{grid-template-columns:1fr;}
  .folio-grid.cols-2,.folio-grid.cols-3,.folio-grid.cols-4{grid-template-columns:1fr;}
  .galeria-grid{grid-template-columns:1fr;}
  .galeria-tile.destacado{grid-column:span 1;}
  .galeria-tile-info{opacity:1;}
  .galeria-visor-flecha{width:36px;height:36px;font-size:1.3rem;}
  .blog-grid{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  /* La barra sigue siendo navy en movil: los colores no cambian con el ancho.
     El menu lo maneja el bloque "MENU DE PANTALLAS PEQUEÑAS" al final. */
  .site-nav .nav-inner{padding:16px 0;}
  .logo{font-size:1.15rem;}
  .btn-wa{padding:10px 16px;font-size:.84rem;}
}

/* ===== ADMIN ===== */
.admin-app{display:grid;grid-template-columns:250px 1fr;min-height:100vh;}
.admin-side{background:var(--navy);color:#dfe4ea;padding:26px 20px;display:flex;flex-direction:column;}
.admin-brand{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.15rem;color:#fff;display:flex;align-items:center;gap:9px;margin-bottom:6px;}
.admin-brand .dot{width:8px;height:8px;border-radius:50%;background:var(--taupe);}
.admin-sub{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:#93a0b3;letter-spacing:.06em;margin-bottom:30px;display:block;}
.admin-side .nav-item{display:block;padding:11px 14px;border-radius:9px;font-size:.9rem;font-weight:500;color:#c3cbd6;margin-bottom:4px;}
.admin-side .nav-item.active{background:#3a465c;color:#fff;}
.admin-main{padding:30px 40px;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;flex-wrap:wrap;gap:12px;}
.topbar h1{font-size:1.4rem;}
.topbar .who{font-size:.85rem;color:var(--muted);}
.admin-table{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
/* El scroll va en el CONTENIDO de la tabla, no en toda la tabla (encabezado
   incluido). Se usa el mecanismo propio de MudBlazor (FixedHeader + Height
   en el <MudTable>, que agrega la clase mud-table-sticky-header) en vez de
   un position:sticky casero: la tabla ya trae su propio soporte para esto y
   evita pelearse con su CSS (border-spacing, capas, etc). */
.admin-table .mud-table-head .mud-table-cell{background:#fff;}

/* ===== LOGIN ===== */
.login-body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy);font-family:'Work Sans',sans-serif;}
.login-card{background:#fff;border-radius:14px;padding:40px 38px;width:340px;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.login-brand{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.3rem;color:var(--navy);display:flex;align-items:center;gap:9px;}
.login-brand .dot{width:8px;height:8px;border-radius:50%;background:var(--taupe);}
.login-sub{color:var(--muted);font-size:.88rem;margin:6px 0 26px;}
.login-card label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:6px;}
.login-card input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:8px;margin-bottom:18px;font-size:.94rem;font-family:inherit;}
.login-card button{width:100%;padding:12px;border:none;border-radius:8px;background:var(--navy);color:#fff;font-weight:600;font-size:.94rem;cursor:pointer;}
.login-error{color:#b3564a;font-size:.85rem;margin:-8px 0 16px;}

/* ===== Anillo de foco (marco alrededor del titulo) =====
   Blazor usa <FocusOnNavigate Selector="h1"> en App.razor: al cargar cada
   pagina le pone tabindex="-1" al titulo y lo enfoca, para que un lector de
   pantalla lo anuncie. Chrome dibuja su anillo de foco alrededor, y se ve
   como un marco torcido cuando el titulo ocupa varias lineas.

   Se quita SIN condiciones. Un elemento con tabindex="-1" no se alcanza con
   Tab, asi que aqui no se pierde ninguna pista de navegacion por teclado:
   el unico foco que recibe es el programatico de arriba. Es el mismo arreglo
   que trae la plantilla oficial de Blazor.
   NO volver a condicionarlo con :not(:focus-visible) — Chrome igual lo pinta. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible,
h1:focus,
h1:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}


/* ==========================================================================
   PORTADA OSCURA — diseno aprobado por el cliente
   La portada (hero + cifras) va en navy; el resto de la pagina sigue claro.
   Este bloque va al final a proposito: debe ganarle a las reglas de arriba
   y a las clases de MudBlazor.
   ========================================================================== */
.hero{
  background:var(--navy);
  color:#fff;
  padding:70px 0 44px;
}
/* Circulo decorativo ELIMINADO a pedido del cliente.
   La regla original vive mas arriba (.hero::before con un radial-gradient);
   aqui se anula con content:none, que impide que el pseudo-elemento
   siquiera se genere. No volver a activarlo. */
.hero::before{
  content:none !important;
}
.hero .eyebrow{color:var(--taupe);}
.hero h1{color:#fff;}
.hero h1 em{color:var(--cream);}
.hero p.lede{color:rgba(255,255,255,.72);}

/* Imagen/video de portada (SiteSetting Hero.ImagenPrincipal): reemplaza el
   fondo navy plano cuando el cliente carga algo. Nunca se recorta el
   archivo — solo se cubre el bloque via object-fit:cover, igual que el resto
   de las fotos del sitio. La capa navy semitransparente encima es fija, no
   depende de la foto: así el texto blanco/crema se sigue leyendo sea cual
   sea la imagen que suban. */
.hero-bg-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,57,76,.55) 0%,rgba(46,57,76,.72) 100%);z-index:1;}
.hero-inner{position:relative;z-index:2;}

/* pastillas de las dos lineas, sobre navy */
.hero .pill-static{background:transparent;border-color:rgba(255,255,255,.26);}
.hero .pill-static.m{color:#fff;}
.hero .pill-static.e{color:var(--taupe);}

/* Botones de MudBlazor dentro de la portada.
   El relleno primario es navy: sobre navy seria invisible, va en taupe. */
.hero .mud-button-filled-primary{
  background-color:var(--taupe);
  color:#2A2016;
}
.hero .mud-button-filled-primary:hover{background-color:#D1B9A8;}
.hero .mud-button-outlined-primary{
  border-color:rgba(255,255,255,.42);
  color:#fff;
}
.hero .mud-button-outlined-primary:hover{
  border-color:#fff;
  background-color:rgba(255,255,255,.08);
}

/* Las cifras ya eran navy: al quedar debajo de la portada forman un solo
   bloque oscuro, separado por una linea fina. */
.stats{border-top:1px solid rgba(255,255,255,.14);}


/* ===== Redes sociales (pie de pagina) =====
   Cada icono se muestra solo si su URL esta configurada en
   /admin/configuracion (Contacto.Instagram / .Facebook / .TikTok).
   Si no hay ninguna, el bloque entero no se renderiza. */
.redes{display:flex;gap:10px;margin-top:18px;}
/* TASK-012: renombrado de ".red" a ".red-social" — MudBlazor genera su propia
   clase utilitaria ".red" (fondo #F44336 !important, su color "Red" de
   paleta) que pisaba por completo estos estilos; no era una eleccion de
   color nuestra, era esa colision de nombres. */
.red-social{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.72);
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.red-social svg{width:17px;height:17px;fill:currentColor;display:block;}
.red-social:hover{background:var(--taupe);border-color:var(--taupe);color:#2A2016;}
.red-social:focus-visible{outline:2px solid var(--taupe);outline-offset:2px;}


/* ==========================================================================
   MENU DE PANTALLAS PEQUEÑAS
   En escritorio los enlaces van en fila y el boton no existe. Por debajo de
   860px los enlaces se ocultan y aparece la hamburguesa, que despliega un
   panel debajo de la barra. El estado vive en PublicLayout (menuAbierto),
   no en JavaScript.
   ========================================================================== */
.burger{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0;
  background:none;border:0;cursor:pointer;
}
.burger span{
  display:block;width:22px;height:2px;border-radius:2px;
  background:#fff;margin:0 auto;
  transition:transform .2s ease,opacity .2s ease;
}
.burger:focus-visible{outline:2px solid var(--taupe);outline-offset:2px;border-radius:4px;}

/* abierta: las barras forman una X */
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:860px){
  .site-nav{position:relative;}
  .burger{display:flex;order:3;}
  .site-nav .nav-inner{gap:14px;}
  .btn-wa{order:2;margin-left:auto;}

  /* cerrado */
  .navlinks{display:none;}

  /* abierto: panel a lo ancho, debajo de la barra */
  .navlinks.open{
    display:flex;
    flex-direction:column;
    gap:0;
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--navy);
    border-top:1px solid rgba(255,255,255,.14);
    box-shadow:0 12px 24px rgba(0,0,0,.28);
    padding:6px 0 10px;
    z-index:60;
  }
  .navlinks.open a{
    padding:14px clamp(20px,5vw,48px);
    border-bottom:0;
    font-size:1rem;
  }
  .navlinks.open a.active{
    border-bottom:0;
    background:rgba(255,255,255,.06);
    box-shadow:inset 3px 0 0 var(--taupe);
  }
}

@media (prefers-reduced-motion:reduce){
  .burger span{transition:none;}
}


/* ===== Boton "Seleccionar imagen" del gestor de medios (TASK-012) =====
   InputFile de Blazor renderiza un <input type="file"> sin estilo propio;
   se envuelve en un <label> con pinta de boton y el input real queda
   visualmente oculto (pero accesible: sigue recibiendo foco y Enter/Espacio
   lo activan, porque el label lo asocia). Clic en el label = abrir el
   explorador de archivos del sistema operativo. */
.media-manager-boton-archivo{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 20px;border-radius:8px;
  background:var(--navy);color:#fff;
  font-family:'Work Sans',sans-serif;font-weight:600;font-size:.9rem;
  cursor:pointer;
}
.media-manager-boton-archivo:hover{background:var(--navy-2);}
.media-manager-boton-archivo input[type="file"]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
}
.media-manager-boton-archivo:focus-within{outline:2px solid var(--taupe);outline-offset:2px;}

/* ===== Biblioteca de imágenes ya subidas (selector reutilizable) =====
   Grilla de miniaturas de todo lo que ya está en el servidor, para elegir en
   vez de volver a subir el mismo archivo. */
.selector-biblioteca{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;
  max-height:320px;overflow-y:auto;
  padding:10px;border:1px solid var(--line);border-radius:8px;background:#FBF8F4;
}
.selector-biblioteca-item{
  display:flex;flex-direction:column;gap:4px;
  border:1px solid var(--line);border-radius:6px;padding:6px;
  background:#fff;cursor:pointer;text-align:left;
}
.selector-biblioteca-item:hover{border-color:var(--taupe);}
.selector-biblioteca-item img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:4px;display:block;}
.selector-biblioteca-item span{font-size:.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ===== Guia de fotos en el panel =====
   Explica al cliente que medidas y peso usar, y por que. Va visible dentro
   del gestor de imagenes, no escondida en un documento aparte. */
.guia-fotos{
  border:1px solid var(--line);
  border-left:3px solid var(--taupe);
  border-radius:8px;
  background:#FBF8F4;
  padding:16px 18px;
}
.guia-fotos-titulo{
  font-weight:600;font-size:.9375rem;color:var(--navy);margin-bottom:12px;
}
.guia-fotos-tabla{width:100%;border-collapse:collapse;font-size:.875rem;margin-bottom:14px;}
.guia-fotos-tabla th{
  text-align:left;font-weight:500;color:var(--muted);
  padding:5px 14px 5px 0;white-space:nowrap;vertical-align:top;width:1%;
}
.guia-fotos-tabla td{padding:5px 0;color:var(--ink);}
.guia-fotos-nota{font-size:.8438rem;color:var(--muted);margin:0 0 8px;line-height:1.55;}
.guia-fotos-nota:last-child{margin-bottom:0;}
.guia-fotos-nota strong{color:var(--ink);}