o saltos blandos */
.poema-single .poema-texto p{
margin: 0 0 .9rem;
}
/* Ajustes finos por breakpoint */
@media (max-width: 420px){
/* móvil chico: sube un poco más */
.poema-single .poema-texto{ font-size: 1.22rem; line-height: 1.95; }
}
@media (min-width: 1200px){
/* desktop grande: que no se haga diminuto en pantallas enormes */
.poema-single .poema-texto{ font-size: 1.32rem; }
}
/* ===========================
Poema — tipografía más grande
=========================== */
/* Título */
.poema-single .poema-titulo {
font-size: clamp(2.4rem, 6vw, 3.6rem); /* ~38px móvil -> ~58px desktop */
line-height: 1.2;
margin: .4rem 0 1.4rem;
}
/* Texto del poema */
.poema-single .poema-texto {
font-size: clamp(1.25rem, 2.8vw, 1.5rem);
/* ≈ 20px en móvil chico, hasta 24px en desktop grande */
line-height: 1.95;
letter-spacing: .01em;
color: var(--pp-tinta);
white-space: pre-wrap;
hyphens: auto;
text-align: center; /* cámbialo a left si prefieres */
max-width: 70ch;
margin-inline: auto;
}
/* Párrafos / estrofas */
.poema-single .poema-texto p {
margin: 0 0 1.2rem;
}
/* Texto del poema más legible en móvil */
.poema-single .poema-texto {
font-size: clamp(1.35rem, 3.5vw, 1.6rem);
/* ~22px en móvil chico, hasta ~26px en desktop */
line-height: 1.65; /* menos aire vertical */
font-weight: 500; /* un poco más gruesa */
letter-spacing: 0; /* más compacto */
color: var(--pp-tinta);
white-space: pre-wrap;
hyphens: auto;
max-width: 70ch;
margin-inline: auto;
text-align: center; /* puedes cambiar a left */
}
/* Versos / párrafos: menos espacio entre estrofas */
.poema-single .poema-texto p {
margin: 0 0 0.7rem; /* antes 1.2rem, ahora más contenido */
}
/* En móvil chico, que aún se lea cómodo */
@media (max-width: 420px) {
.poema-single .poema-texto {
font-size: 1.4rem; /* ≈22.4px */
line-height: 1.7;
font-weight: 500;
}
}
/* ===========================
Poema (mobile optimizado)
=========================== */
/* Texto del poema */
.poema-single .poema-texto {
font-size: clamp(1.4rem, 4vw, 1.6rem);
/* ~22px en móviles chicos → ~25-26px en desktop */
line-height: 1.6; /* menos altura de línea */
font-weight: 600; /* más grueso */
color: var(--pp-tinta);
white-space: pre-wrap;
hyphens: auto;
max-width: 70ch;
margin-inline: auto;
text-align: center;
}
/* Estrofas / párrafos */
.poema-single .poema-texto p {
margin: 0 0 0.5rem; /* antes 1rem+, ahora mucho más apretado */
}
/* Extra ajuste solo en móvil pequeño */
@media (max-width: 480px) {
.poema-single .poema-texto {
font-size: 1.45rem; /* ≈23px */
line-height: 1.65;
font-weight: 600; /* más notorio en pantallas chicas */
}
.poema-single .poema-texto p {
margin-bottom: 0.4rem; /* menos espacio aún en móvil */
}
}
/* Versos dentro de una estrofa */
.poema-texto p {
margin: 0 0 .9rem; /* espacio entre estrofas */
line-height: 1.8;
}
.poema-texto p:last-child { margin-bottom: 0; }
/* Si pegas texto con muchos
, mantenlo legible igual */
.poema-texto {
white-space: normal; /* usa párrafos para estrofas */
text-align: center; /* o left si prefieres */
max-width: 70ch;
margin-inline: auto;
font-size: clamp(1.25rem, 3vw, 1.6rem);
}
/* Afinado opcional para móvil pequeño */
@media (max-width:480px){
.poema-texto p { line-height: 1.85; margin-bottom: .8rem; }
}
/* Estilo del poema cuando usas el bloque Verso */
.poema-texto .wp-block-verse {
white-space: pre-wrap;
font-family: "Cormorant Garamond", serif;
font-size: clamp(1.5rem, 3vw, 1.8rem); /* antes 1.3–1.55 → ahora 1.5–1.8 */
line-height: 1.75; /* un poco más alto por el mayor tamaño */
color: var(--pp-tinta, #3a2b27);
text-align: center;
margin: 0;
padding: 0;
background: none;
border: 0;
max-width: 70ch;
margin-inline: auto;
}
/* Estrofas separadas con Enter en blanco */
.poema-texto .wp-block-verse br + br {
line-height: 2.2;
}
/* ===========================
Proyecto Postman — Página El Proyecto
=========================== */
:root{
--pp-crema: #f5e6d7;
--pp-crema-2: #f7efe8;
--pp-tinta: #3a2b27;
--pp-tinta-soft: #6b4f47;
--pp-acento: #8e3b35;
--pp-borde: rgba(0,0,0,.08);
}
/* ---------- Contenedor general ---------- */
.proyecto{
max-width: 960px;
margin: 0 auto;
padding: 2rem 1.5rem 3rem;
background: var(--pp-crema);
color: var(--pp-tinta);
font-family: "Cormorant Garamond", serif;
line-height: 1.7;
}
/* ---------- Título principal ---------- */
.proyecto > h1{
font-size: clamp(2rem, 3vw, 2.6rem);
text-align: center;
margin: 0 0 2rem;
color: var(--pp-tinta);
letter-spacing: .02em;
}
/* ---------- Secciones ---------- */
.proy-section{
margin-bottom: 3rem;
padding: 1.5rem 1.2rem;
background: var(--pp-crema-2);
border: 1px solid var(--pp-borde);
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.proy-section h2{
font-size: clamp(1.5rem, 2.4vw, 2rem);
margin: 0 0 1rem;
color: var(--pp-acento);
font-weight: 600;
}
.proy-section p{
margin: 0 0 1rem;
font-size: 1.08rem;
color: var(--pp-tinta);
}
/* ---------- Citas destacadas ---------- */
.proy-quote{
text-align: center;
font-style: italic;
font-size: 1.2rem;
margin: 1.6rem auto 0;
padding: .8rem 1rem;
border-left: 4px solid var(--pp-acento);
background: rgba(255,255,255,.45);
border-radius: 6px;
max-width: 60ch;
}
/* ---------- Grilla de features ---------- */
.pp-features-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
gap: 1.4rem;
margin-top: 2.5rem;
}
.pp-feature-card{
background: var(--pp-crema-2);
border: 1px solid var(--pp-borde);
border-radius: 14px;
padding: 1.4rem 1.2rem 1.6rem;
box-shadow: 0 4px 14px rgba(0,0,0,.05);
transition: transform .18s ease, box-shadow .18s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pp-feature-card:hover{
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.pp-feature-badge{
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 700;
color: #fff;
background: var(--pp-acento);
padding: .25rem .6rem;
border-radius: 999px;
display: inline-block;
margin-bottom: .8rem;
}
.pp-feature-card h3{
margin: 0 0 .6rem;
font-size: 1.3rem;
color: var(--pp-tinta);
}
.pp-feature-card p{
flex-grow: 1;
margin: 0 0 1rem;
font-size: 1rem;
color: var(--pp-tinta-soft);
}
.pp-feature-btn{
align-self: flex-start;
text-decoration: none;
background: var(--pp-acento);
color: #fff;
font-weight: 600;
font-size: .95rem;
padding: .45rem .9rem;
border-radius: 10px;
transition: background .2s ease;
}
.pp-feature-btn:hover{
background: #722d29;
}
/* ---------- Responsivo ---------- */
@media (max-width: 600px){
.proyecto{ padding: 1.5rem 1rem; }
.proy-section{ padding: 1.2rem; }
.proy-section p{ font-size: 1rem; }
}
/* Tarjetas — sin barra roja y con icono */
.pp-feature-card{
position: relative;
background: var(--pp-crema-2);
border: 1px solid var(--pp-borde);
border-radius: 14px;
padding: 1.4rem 1.2rem 2.4rem; /* más padding abajo para el icono */
box-shadow: 0 4px 14px rgba(0,0,0,.05);
transition: transform .18s ease, box-shadow .18s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pp-feature-card:hover{
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
/* Eliminamos el badge */
.pp-feature-badge{ display:none; }
/* Estilo base de las tarjetas */
.pp-feature-card{
position: relative;
background: var(--pp-crema-2);
border: 1px solid var(--pp-borde);
border-radius: 14px;
padding: 1.4rem 1.2rem 2.8rem;
box-shadow: 0 4px 14px rgba(0,0,0,.05);
transition: transform .18s ease, box-shadow .18s ease;
}
.pp-feature-card:hover{
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
/* Íconos base */
.pp-icon{
position: absolute;
bottom: 1rem;
right: 1rem;
font-size: 2rem; /* ← más grande */
color: var(--pp-acento);
opacity: .35;
transition: opacity .2s ease, transform .2s ease;
}
.pp-feature-card:hover .pp-icon{
opacity: .6;
transform: scale(1.15);
}
/* Íconos personalizados por tarjeta */
.pp-icon.historia { content: "✦"; }
.pp-icon.sobres { content: "✉"; }
.pp-icon.simbolos { content: "☉"; }
.pp-icon.cartas { content: "✒"; }
/* Estilo base del botón */
.pp-feature-btn {
display: inline-block;
margin-top: 1rem;
padding: 0.55rem 1.2rem;
background: var(--pp-acento, #8b3a3a);
color: #fff !important; /* ← texto blanco fijo */
font-weight: 600;
text-decoration: none !important;
border-radius: 10px;
transition: background .25s ease, transform .2s ease;
}
/* Hover y focus: un poco más oscuro, nunca azul */
.pp-feature-btn:hover,
.pp-feature-btn:focus,
.pp-feature-btn:active {
background: #702c2c; /* tono ladrillo más oscuro */
color: #fff !important; /* sigue en blanco */
transform: translateY(-2px); /* efecto sutil */
}
/* Opcional: quitar cualquier subrayado raro */
.pp-feature-btn:visited {
color: #fff !important;
}
/* ===== Botón sólido ===== */
.pp-feature-btn {
display: inline-block;
margin-top: 1rem;
padding: 0.55rem 1.2rem;
background: var(--pp-acento, #8b3a3a);
color: #fff !important;
font-weight: 600;
text-decoration: none !important;
border-radius: 10px;
transition: background .25s ease, transform .2s ease;
border: none;
}
.pp-feature-btn:hover,
.pp-feature-btn:focus {
background: #702c2c;
color: #fff !important;
transform: translateY(-2px);
}
/* ===== Botón fantasma ===== */
.pp-feature-btn--ghost {
display: inline-block;
margin-top: 1rem;
padding: 0.55rem 1.2rem;
background: transparent;
border: 2px solid var(--pp-acento, #8b3a3a);
color: var(--pp-acento, #8b3a3a) !important;
font-weight: 600;
text-decoration: none !important;
border-radius: 10px;
transition: background .25s ease, color .25s ease, transform .2s ease;
}
.pp-feature-btn--ghost:hover,
.pp-feature-btn--ghost:focus {
background: var(--pp-acento, #8b3a3a);
color: #fff !important;
transform: translateY(-2px);
}
/* ===== GRID CONTENEDOR ===== */
.pp-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.6rem;
margin: 2rem auto;
max-width: 1100px;
padding: 0 1rem;
}
/* ===== TARJETAS ===== */
.pp-feature-card {
position: relative;
padding: 1.8rem;
border-radius: 14px;
background: #fdf9f4;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 6px 18px rgba(0,0,0,.06);
transition: transform .18s ease, box-shadow .18s ease;
}
.pp-feature-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
/* ===== TEXTO ===== */
.pp-feature-card h3 {
font-family: "Cormorant Garamond", serif;
font-size: 1.35rem;
color: #3a2b27;
margin: 0 0 .6rem;
}
.pp-feature-card p {
font-family: "Cormorant Garamond", serif;
font-size: 1rem;
color: #5b4633;
margin: 0 0 1.4rem;
line-height: 1.55;
}
/* ===== ICONOS SUPERIORES ===== */
.pp-feature-card .pp-icon {
position: absolute;
top: 14px;
right: 14px;
font-size: 1.6rem;
color: #8b3a3a;
opacity: .75;
}
.pp-feature-card .pp-icon.historia { content: "✦"; }
.pp-feature-card .pp-icon.simbolos { content: "☉"; }
.pp-feature-card .pp-icon.sobres { content: "✉"; }
.pp-feature-card .pp-icon.cartas { content: "✒"; }
/* ===== BOTONES GHOST ===== */
.pp-feature-btn--ghost {
display: inline-block;
padding: .5rem 1.1rem;
border: 2px solid #8b3a3a;
border-radius: 10px;
background: transparent;
color: #8b3a3a;
font-family: "Cormorant Garamond", serif;
font-weight: 600;
text-decoration: none;
transition: all .2s ease;
}
.pp-feature-btn--ghost:hover,
.pp-feature-btn--ghost:focus {
background: #8b3a3a;
color: #fff;
border-color: #8b3a3a;
}
/* ===== CONTENEDOR GENERAL ===== */
.proyecto--historia {
background: #fdf9f4;
color: #3a2b27;
font-family: "Cormorant Garamond", serif;
line-height: 1.75;
max-width: 900px;
margin: 0 auto;
padding: 2rem 1.4rem 3rem;
}
/* ===== CABECERA ===== */
.proyecto-header h1 {
font-size: clamp(2.4rem, 6vw, 3rem);
text-align: center;
margin: 0 0 2rem;
color: #8b3a3a;
letter-spacing: 0.5px;
}
/* ===== SECCIONES ===== */
.proy-section {
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px dashed rgba(0,0,0,.1);
}
.proy-section:last-of-type {
border-bottom: none;
}
/* ===== TÍTULOS ===== */
.proy-section h2 {
font-size: clamp(1.6rem, 3.5vw, 2rem);
margin: 0 0 1rem;
color: #5b4633;
text-align: center;
}
/* ===== PÁRRAFOS ===== */
.proy-section p {
margin: 0 0 1.2rem;
font-size: 1.1rem;
color: #3a2b27;
text-align: justify;
}
/* ===== LISTAS ===== */
.proy-section ul {
margin: 0 0 1.5rem 1.2rem;
padding: 0;
}
.proy-section ul li {
margin: 0.4rem 0;
padding-left: 0.4rem;
list-style-type: "✦ ";
color: #5b4633;
}
/* ===== DETALLES DESTACADOS ===== */
.proy-section strong {
color: #8b3a3a;
}
.proy-section em {
color: #6b4f47;
font-style: italic;
}
/* ===== DATOS CURIOSOS ===== */
.proy-section p strong {
background: #f5e6d3;
padding: 0.15rem 0.35rem;
border-radius: 6px;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
.proyecto--historia {
padding: 1.6rem 1rem 2rem;
}
.proy-section p {
font-size: 1.05rem;
text-align: left;
}
}
/* ============= Proyecto Postman — Historia y conceptos ============= */
:root{
--pp-crema: #F5E6D7;
--pp-crema-2: #FBF5EF;
--pp-tinta: #3A2B27;
--pp-tinta-soft:#6b4f47;
--pp-acento:#B4443D;
--pp-borde: rgba(0,0,0,.10);
}
/* Contenedor general de la página */
.proyecto-postman.historia-conceptos{
background: var(--pp-crema);
color: var(--pp-tinta);
}
/* Hero / título principal */
.proy-hero{
max-width: 1140px;
margin: 0 auto;
padding: 2.2rem 1.2rem 1.2rem;
}
.proy-hero h1{
font-family: "Cormorant Garamond", serif;
font-weight: 600;
letter-spacing: .01em;
color: var(--pp-acento);
text-align: center;
font-size: clamp(2.2rem, 4.6vw, 3.6rem);
margin: 0;
}
/* Secciones (tarjetas) */
.proy-section{
max-width: 1140px;
margin: 0 auto 1.2rem;
padding: 0 1.2rem;
}
.proy-section > *:first-child{ margin-top: 0 }
.proy-section h2{
font-family: "Cormorant Garamond", serif;
font-weight: 700;
letter-spacing: .01em;
color: var(--pp-tinta);
margin: 0 0 .7rem;
font-size: clamp(1.6rem, 3vw, 2.2rem);
}
/* Cajita cremita que abraza el contenido (card) */
.proy-section .proy-box,
.proy-section .proy-verse{ /* por si el pre va directo */
background: var(--pp-crema-2);
border: 1px solid var(--pp-borde);
border-radius: 18px;
box-shadow: 0 16px 36px rgba(0,0,0,.08);
}
/* --- Verso / texto preformateado con look elegante --- */
.proy-verse{
/* BORRAR lo “monoespaciado” del
*/
font-family: "Cormorant Garamond", serif !important;
font-size: clamp(1.08rem, 1.7vw, 1.35rem);
line-height: 1.85;
color: var(--pp-tinta);
font-weight: 500;
/* Respeta saltos pegados desde tu editor */
white-space: pre-wrap; /* <- clave */
word-break: normal;
overflow-wrap: anywhere;
/* Caja */
padding: 1.2rem 1.3rem;
margin: .2rem 0 1.1rem;
/* Quitar estilo pre por defecto */
border-left: 0;
background-clip: padding-box;
}
/* Borde/acento sutil a la izquierda (opcional, estiliza la “tarjeta” del texto) */
.proy-verse{
position: relative;
}
.proy-verse::before{
content:"";
position:absolute;
inset: 0 auto 0 0;
width: 6px;
border-radius: 18px 0 0 18px;
background: linear-gradient(180deg, rgba(180,68,61,.35), rgba(180,68,61,.08));
}
/* Espaciado más aire dentro de cada sección */
.proy-section .proy-verse + .proy-verse{ margin-top: .9rem; }
/* Responsive pequeño: más cómodo en móviles */
@media (max-width: 540px){
.proy-hero{ padding-top: 1.6rem }
.proy-hero h1{ font-size: clamp(2rem, 8vw, 2.6rem) }
.proy-section h2{ font-size: clamp(1.4rem, 6vw, 1.9rem) }
.proy-verse{
font-size: clamp(1.06rem, 4.4vw, 1.22rem);
line-height: 1.78;
padding: 1rem 1.05rem;
}
}
/* Si metes imágenes decorativas por sección, este slot te ayuda */
.proy-figure{
margin: .6rem 0 1rem;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--pp-borde);
box-shadow: 0 10px 24px rgba(0,0,0,.07);
}
.proy-figure img{ display:block; width:100%; height:auto; }
/* ===== Proyecto > Historia y conceptos — mejora móvil ===== */
/* Versos/bloques que usan el proxy (pre.proy-verse) */
.proy-verse{
font-family:"Cormorant Garamond", serif;
white-space:pre-wrap;
word-break:normal;
overflow-wrap:normal;
hyphens:none;
}
/* Bloque contenedor de cada sección tarjetita */
.proy-block{
background:#faf5ef;
border:1px solid rgba(0,0,0,.08);
border-radius:14px;
box-shadow:0 12px 24px rgba(0,0,0,.06);
padding:1.4rem 1.6rem; /* desktop por defecto */
max-width:1100px;
margin:0 auto 1.2rem;
}
/* Títulos por sección */
.proy-section h2{
font-family:"Cormorant Garamond", serif;
font-weight:700;
margin:0 0 .6rem;
}
/* --------- MÓVIL: más grande y menos “quebrado” --------- */
@media (max-width: 768px){
/* Usa TODO el ancho útil */
.proy-block{
padding:1rem 1rem; /* menos padding lateral para ganar ancho */
box-shadow:0 8px 18px rgba(0,0,0,.05);
}
/* Letra más grande y menos aire entre líneas */
.proy-verse{
font-size: clamp(1.20rem, 5.2vw, 1.35rem); /* ↑ tamaño */
line-height: 1.68; /* compacto pero cómodo */
padding:.2rem 0; /* sin relleno que “achique” */
max-width:100%; /* que no se limite a 70ch en móvil */
}
.proy-section h2{
font-size: clamp(1.6rem, 6vw, 2rem);
line-height:1.18;
}
}
@media (max-width: 420px){
.proy-block{ padding:.9rem .9rem; }
.proy-verse{
font-size: clamp(1.24rem, 6vw, 1.4rem); /* aún un poco más grande en phones chicos */
line-height:1.62;
}
.proy-section h2{
font-size: clamp(1.55rem, 7vw, 1.9rem);
}
}
@media (max-width: 768px){
.proy-block{
padding: 1rem; /* mantiene aire en todos lados */
}
.proy-verse{
font-size: clamp(1.2rem, 5vw, 1.4rem);
line-height: 1.7;
padding-left: .3rem; /* <- airecito extra solo a la izquierda */
padding-right: .3rem; /* <- igual a la derecha para equilibrar */
white-space: pre-wrap; /* sigue respetando saltos */
}
}
/* Los símbolos */
/* Contenedor general */
.container.simbolos-wrap{ max-width:1140px; margin-inline:auto; padding:0 1.1rem; }
/* Hero */
.simbolos-hero{
text-align:center;
padding: 1.6rem 0 1rem;
}
.simbolos-hero h1{
font-family:"Cormorant Garamond", serif;
font-weight:700;
color:var(--pp-tinta);
font-size: clamp(2rem, 3.2vw, 2.8rem);
letter-spacing:.02em;
margin:.2rem 0 .3rem;
}
.simbolos-hero .lead{
color:var(--pp-tinta-soft);
margin:0;
}
/* Secciones */
.simbolos-section{
background: var(--pp-crema-2);
border:1px solid var(--pp-borde);
border-radius:16px;
padding: clamp(1rem, 2.2vw, 1.4rem);
margin: 1rem 0 1.2rem;
box-shadow: 0 14px 32px rgba(0,0,0,.06);
}
.simbolos-h2{
font-family:"Cormorant Garamond", serif;
font-weight:700;
color:var(--pp-tinta);
font-size: clamp(1.4rem, 2.6vw, 1.8rem);
margin: .2rem 0 1rem;
position: relative;
}
.simbolos-h2::after{
content:"";
display:block;
width:56px; height:3px;
background:rgba(180,68,61,.25);
border-radius:6px;
margin-top:.35rem;
}
/* Intro breve */
.simbolos-intro{ margin:.2rem 0 1rem; color:var(--pp-tinta-soft); }
/* Grid de tipos de símbolos */
.symbol-grid{
display:grid;
gap:14px;
grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px){ .symbol-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .symbol-grid{ grid-template-columns:1fr; } }
.symbol-card{
background:#fff;
border:1px solid var(--pp-borde);
border-radius:14px;
padding:14px 14px 12px;
display:flex; flex-direction:column; gap:.25rem;
box-shadow: 0 10px 26px rgba(0,0,0,.06);
transition: transform .16s ease, box-shadow .16s ease;
min-height: 132px;
}
.symbol-card:hover{
transform: translateY(-2px);
box-shadow: 0 16px 30px rgba(0,0,0,.10);
}
.symbol-icon{
width:42px; height:42px;
display:grid; place-items:center;
border-radius:12px;
background: #F7EDEA;
color: var(--pp-acento);
border:1px solid rgba(180,68,61,.25);
}
.symbol-title{
font-family:"Cormorant Garamond", serif;
font-weight:700;
color:var(--pp-tinta);
font-size: clamp(1.05rem, 1.8vw, 1.2rem);
margin:.35rem 0 .1rem;
}
.symbol-card p{ margin:0; color:var(--pp-tinta-soft); }
/* Chips de lugares */
.simbolos-chips{
display:flex; flex-wrap:wrap; gap:.5rem .6rem;
list-style:none; padding:0; margin:.35rem 0 1rem;
}
.simbolos-chips li{
background:#fff; border:1px solid var(--pp-borde);
border-radius:999px; padding:.35rem .7rem;
color:var(--pp-tinta); font-weight:600;
}
/* Tip/nota */
.simbolos-tip{
display:flex; gap:.6rem; align-items:flex-start;
background:#FFF8F5;
border:1px solid rgba(180,68,61,.18);
border-radius:12px;
padding:.65rem .8rem;
color:var(--pp-tinta);
}
.tip-icon{
width:28px; height:28px; min-width:28px;
display:grid; place-items:center;
background:#FBE9E6;
color:var(--pp-acento);
border-radius:8px;
border:1px solid rgba(180,68,61,.25);
}
.simbolos-tip p{ margin:.05rem 0 0; }
/* Galería de avistamientos (placeholders) */
.simbolos-gallery{
display:grid; gap:10px;
grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:900px){ .simbolos-gallery{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .simbolos-gallery{ grid-template-columns:1fr; } }
.gph{
aspect-ratio: 4/3;
border:1px dashed var(--pp-borde);
border-radius:12px;
background:
linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,.02)),
#fff;
display:grid; place-items:center;
color:var(--pp-tinta-soft);
font-weight:600;
}
.gph span{ opacity:.75; }
/* Tipografía general dentro de la página */
.simbolos-wrap p{ line-height:1.65; }
/* Los sobres */
/* ===== Contenedor ===== */
.container.sobres-wrap{ max-width:1140px; margin-inline:auto; padding:0 1.1rem; }
/* Hero */
.sobres-hero{ text-align:center; padding: 1.6rem 0 1rem; }
.sobres-hero h1{
font-family:"Cormorant Garamond", serif; font-weight:700;
color:var(--pp-tinta); letter-spacing:.02em;
font-size: clamp(2rem, 3.2vw, 2.8rem); margin:.2rem 0 .3rem;
}
.sobres-hero .lead{ color:var(--pp-tinta-soft); margin:0; }
/* Secciones */
.sobres-section{
background: var(--pp-crema-2);
border:1px solid var(--pp-borde);
border-radius:16px;
padding: clamp(1rem, 2.2vw, 1.4rem);
margin: 1rem 0 1.2rem;
box-shadow: 0 14px 32px rgba(0,0,0,.06);
}
.sobres-h2{
font-family:"Cormorant Garamond", serif; font-weight:700;
color:var(--pp-tinta);
font-size: clamp(1.4rem, 2.6vw, 1.8rem);
margin: .2rem 0 1rem; position: relative;
}
.sobres-h2::after{
content:""; display:block; width:56px; height:3px;
background:rgba(180,68,61,.25); border-radius:6px; margin-top:.35rem;
}
/* Card simple (¿Qué son?) */
.sobres-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
.sobres-card{
background:#fff; border:1px solid var(--pp-borde);
border-radius:14px; padding:14px;
display:flex; flex-direction:column; gap:.35rem;
box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.sobres-icon{
width:42px; height:42px; display:grid; place-items:center;
border-radius:12px; background:#F7EDEA; color:var(--pp-acento);
border:1px solid rgba(180,68,61,.25);
}
.sobres-title{
font-family:"Cormorant Garamond", serif; font-weight:700;
color:var(--pp-tinta); margin:.35rem 0 .1rem;
font-size: clamp(1.05rem, 1.8vw, 1.2rem);
}
/* Caja de contenido */
.sobres-caja{
background:#fff; border:1px solid var(--pp-borde);
border-radius:14px; padding:14px;
box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.sobres-lista{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.sobres-lista li{ color:var(--pp-tinta); }
.sobres-lista li strong{ color:var(--pp-acento); }
.sobres-lista li span{ display:block; color:var(--pp-tinta-soft); }
/* Chips de lugares */
.sobres-chips{
display:flex; flex-wrap:wrap; gap:.5rem .6rem; list-style:none; padding:0; margin:.35rem 0 0;
}
.sobres-chips li{
background:#fff; border:1px solid var(--pp-borde);
border-radius:999px; padding:.35rem .7rem;
color:var(--pp-tinta); font-weight:600;
}
/* Nota “si encuentras alguno” */
.sobres-tip{
display:flex; gap:.6rem; align-items:flex-start;
background:#FFF8F5; border:1px solid rgba(180,68,61,.18);
border-radius:12px; padding:.65rem .8rem; color:var(--pp-tinta);
}
.sobres-tip .tip-icon{
width:28px; height:28px; min-width:28px;
display:grid; place-items:center;
background:#FBE9E6; color:var(--pp-acento);
border-radius:8px; border:1px solid rgba(180,68,61,.25);
}
.sobres-tip p{ margin:.05rem 0 0; }
/* Tipografía general dentro de la página */
.sobres-wrap p{ line-height:1.65; }
/* ===== Contenedor general ===== */
.pp-wrap{
max-width: 1140px;
margin-inline: auto;
padding: 0 1.1rem;
}
/* ===== Sección ===== */
.pp-block{
margin: 1.6rem 0 2.4rem;
}
.pp-h2{
font-family: "Special Elite", serif;
font-size: clamp(1.8rem, 3.2vw, 2.3rem);
color: var(--pp-tinta);
margin: 0 0 .4rem;
}
.pp-lead{
font-family: "Cormorant Garamond", serif;
color: var(--pp-tinta-soft);
font-size: clamp(1.05rem, 1.8vw, 1.2rem);
line-height: 1.7;
margin: 0 0 1.1rem;
}
/* ===== Galería (grid responsivo) ===== */
.pp-gallery{
display: grid;
gap: 14px;
/* 3 col por defecto; puedes controlar con data-cols (2 o 4) si lo deseas */
grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){
.pp-gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
.pp-gallery{ grid-template-columns: 1fr; }
}
/* ===== Tarjeta de imagen ===== */
.pp-tile{
background: var(--pp-crema-2);
border: 1px solid var(--pp-borde);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(0,0,0,.06);
transition: transform .15s ease, box-shadow .15s ease;
display: flex;
flex-direction: column;
}
.pp-tile:hover{
transform: translateY(-2px);
box-shadow: 0 16px 30px rgba(0,0,0,.08);
}
/* Proporciones (puedes mezclarlas para variar la retícula) */
.pp-tile img{
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.pp-tile.is-square img{ aspect-ratio: 1 / 1; }
.pp-tile.is-wide img{ aspect-ratio: 16 / 9; }
.pp-tile.is-tall img{ aspect-ratio: 3 / 4; }
/* Pie de foto */
.pp-tile figcaption{
font-family: "Cormorant Garamond", serif;
color: var(--pp-tinta);
padding: .7rem .9rem;
font-size: 1rem;
border-top: 1px solid var(--pp-borde);
}
/* Si WordPress envuelve la imagen con , que no se vea azul ni subrayado */
.pp-tile a{ color: inherit; text-decoration: none; }
.pp-tile a:hover{ color: inherit; }
/* Imagen mapa de poemas */
/* Contenido centrado y responsivo */
.pp-coming{
max-width: 1200px; /* cámbialo a 100% si quieres de lado a lado */
margin: 48px auto;
padding: 0 16px;
}
.pp-coming img{
width: 100%;
height: auto;
display: block;
border-radius: 16px;
box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
/* Variante full-bleed (de borde a borde). Descomenta si lo quieres así. */
/*
.pp-coming{ max-width: none; padding: 0; margin: 0; }
.pp-coming img{ border-radius: 0; box-shadow: none; }
*/
/* ===== Archive Cartas - Próximamente ===== */
.archive-carta{
background: var(--pp-crema, #f5e6d7);
color: var(--pp-tinta, #3a2b27);
}
.pp-hero.container{
max-width: 1140px;
margin: 18px auto 8px;
padding: 0 18px;
}
.pp-hero-title{
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: clamp(2rem, 3.2vw, 2.8rem);
letter-spacing: .01em;
margin: .4rem 0 .2rem;
color: var(--pp-tinta, #3a2b27);
text-align: center;
}
.pp-hero-sub{
text-align: center;
margin: 0 0 12px;
opacity: .8;
}
.pp-coming{
max-width: 1100px;
margin: 12px auto 44px;
padding: 0 18px;
}
.pp-coming img{
width: 100%;
height: auto;
display: block;
border-radius: 16px;
box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
/* Opcional: full-bleed (de lado a lado) */
/*
.archive-carta .pp-coming{ max-width: none; padding: 0; margin: 0; }
.archive-carta .pp-coming img{ border-radius: 0; box-shadow: none; }
*/
/* Layout de la página de contacto */
.contacto-wrapper{
display:grid;
grid-template-columns: 2fr 1fr;
gap: 22px;
align-items: start;
}
@media (max-width: 900px){
.contacto-wrapper{ grid-template-columns: 1fr; }
}
/* Tarjeta del formulario */
.contacto-forma{
background: #fdf9f4;
border:1px solid rgba(0,0,0,.08);
border-radius: 14px;
box-shadow: 0 10px 24px rgba(0,0,0,.06);
padding: 18px 18px 20px;
}
.contacto-forma h2{
margin: 0 0 10px;
font-size: clamp(1.5rem, 2.2vw, 2rem);
}
.contacto-forma label{
display:block;
margin: 12px 0 6px;
font-weight: 700;
color:#6b4f47;
}
.contacto-forma .opc{ font-weight:600; opacity:.8; }
.contacto-forma input[type="text"],
.contacto-forma input[type="email"],
.contacto-forma textarea{
width:100%;
border:1px solid rgba(0,0,0,.18);
border-radius: 10px;
background:#fff;
padding: 12px 14px;
font: inherit;
outline: none;
}
.contacto-forma textarea{ resize: vertical; }
/* Botón reutilizando tu sistema */
.pp-btn{
display:inline-block;
border-radius:12px;
padding:10px 16px;
font-weight:700;
text-decoration:none;
}
.pp-btn--primary{ background:#B4443D; color:#fff; border:none; }
.pp-btn--primary:hover,
.pp-btn--primary:focus{ background:#9f3d37; color:#fff; }
.pp-btn--ghost{ border:2px solid #B4443D; color:#B4443D; background:transparent; }
.pp-btn--ghost:hover,
.pp-btn--ghost:focus{ background:#B4443D; color:#fff; }
/* Avisos (usa el shortcode) */
.telegrama-banner{
margin: 10px 0 12px;
padding:.9rem 1rem;
border-radius:10px;
border:1px solid transparent;
text-align:center;
font-weight:600;
}
.telegrama-banner.ok { background:#e8f7e8; border-color:#a8e0a8; color:#205c20; }
.telegrama-banner.err { background:#fdebea; border-color:#f3b1ac; color:#7d1f19; }
.telegrama-banner.warn { background:#fff8e6; border-color:#f3d7a6; color:#7a4b09; }
/* Tarjeta Instagram */
.contacto-social .ig-card{
background:#fff7ee;
border:1px solid rgba(0,0,0,.08);
border-radius:14px;
box-shadow: 0 10px 24px rgba(0,0,0,.06);
padding:18px;
text-align:center;
}
.ig-card .ig-icon{
width:64px; height:64px;
border-radius:50%;
display:grid; place-items:center;
margin: 0 auto 8px;
background:#B4443D; color:#fff; font-weight:700;
}
.ig-card h3{ margin:.2rem 0 .4rem; }
.ig-card p { margin:0 0 .8rem; color:#6b4f47; }
.contacto-instagram .wick-img {
max-width: 140px;
margin: 0 auto 1rem;
display: block;
border-radius: 50%;
border: 4px solid #F5E6D3; /* borde cremita para que se funda */
object-fit: cover;
aspect-ratio: 1/1;
box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* sutil sombra para dar volumen */
}
/* Tarjeta lateral (Wick + Instagram) */
.contacto-social .ig-card{
background:#fdfaf6; /* cremita */
border:1px solid #f1e3d3;
border-radius:16px;
padding:1.6rem 1.4rem 1.4rem;
text-align:center;
box-shadow:0 4px 14px rgba(0,0,0,.06);
display:flex;
flex-direction:column;
align-items:center;
gap:.8rem;
}
/* Wick circular y grande */
.contacto-social .wick-img{
width:200px; max-width:70%;
aspect-ratio:1/1;
object-fit:cover;
border-radius:50%;
border:6px solid #F5E6D3; /* borde cremita */
box-shadow:0 6px 14px rgba(0,0,0,.10);
margin-bottom:.3rem;
}
/* Título y texto */
.contacto-social .ig-card h3{
font-size:1.2rem;
margin:0 .2rem .2rem;
color:#3a2b27;
}
.contacto-social .ig-card p{
margin:0 0 .8rem;
color:#5a463f;
font-size:1rem;
line-height:1.5;
}
/* Botón ya usa tu pp-btn --ghost; aquí solo ajuste opcional */
.contacto-social .pp-btn--ghost{
padding:.55rem 1.1rem;
border-radius:10px;
}
.contacto-social .pp-btn--ghost {
display:inline-block; /* lo centra dentro del text-align:center */
margin:0 auto; /* por si algún reset lo estaba alineando raro */
}
/* Alertas de Telegrama */
.telegrama-alert {
margin: 1rem 0;
padding: 1rem 1.25rem;
border-radius: 10px;
font-family: "Cormorant Garamond", serif;
font-size: 1.05rem;
line-height: 1.5;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
animation: fadeInDown 0.6s ease;
}
.telegrama-alert svg {
flex-shrink: 0;
width: 22px;
height: 22px;
}
.telegrama-success {
background: #e8f8f0;
border: 1px solid #9ad1b1;
color: #2f6849;
}
.telegrama-error {
background: #fdeaea;
border: 1px solid #e3a0a0;
color: #742e2e;
}
/* Animación entrada */
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- HERO suavizado ---------- */
/* === HERO: imagen de Wick circular con marco === */
.pp-hero-media{
/* tamaño flexible (más chico en escritorio que antes) */
width: clamp(220px, 28vw, 420px);
aspect-ratio: 1 / 1;
/* círculo y recorte */
border-radius: 50%;
overflow: hidden;
/* marco doble (papel + trazo “sello postal”) */
background: var(--paper);
border: 8px solid var(--paper); /* aro interior color papel */
outline: 2px dashed var(--ink2); /* aro exterior punteado */
outline-offset: 10px;
/* colocación y sombra */
justify-self: end; /* a la derecha en escritorio */
box-shadow: 0 14px 36px rgba(0,0,0,.12);
/* importante: NO flex aquí, para que no distorsione el círculo */
display: block;
}
/* La imagen sólo rellena el círculo, sin bordes ni sombras */
.pp-hero-media .pp-wick{
width: 100%;
height: 100%;
object-fit: cover; /* rellena sin deformar */
display: block;
border: 0;
box-shadow: none;
}
/* ===== Móvil: centrado y tamaño correcto ===== */
@media (max-width: 900px){
.pp-hero-media{
margin: 18px auto 0; /* centra el círculo */
justify-self: center; /* por si aplica grid */
width: clamp(200px, 58vw, 260px); /* tamaño móvil */
outline-offset: 6px; /* ajuste fino del aro */
}
}
/* ---------- Tarjetas: micro-animación + esquinita ---------- */
.pp-card{
background: linear-gradient(180deg,#fff, #fff8f2);
transition: transform .16s ease, box-shadow .16s ease, background .2s ease;
will-change: transform;
}
.pp-card:hover{
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(0,0,0,.12);
background: linear-gradient(180deg,#fff,#fff5ee);
}
.pp-card p{ line-height:1.6; color: var(--ink); opacity:.92; }
/* Esquina ornamental */
.pp-card {
position: relative;
overflow: hidden;
}
.pp-corner{
position:absolute; right:14px; bottom:14px;
width: 22px; height: 22px; opacity:.55;
background: linear-gradient(145deg,#c07, #b65a52);
/* rombo con máscara */
-webkit-mask: radial-gradient(circle at 50% 50%, black 60%, transparent 62%)
, conic-gradient(from 45deg, black 0 90deg, transparent 0);
-webkit-mask-composite: source-in, xor;
mask: radial-gradient(circle at 50% 50%, black 60%, transparent 62%),
conic-gradient(from 45deg, black 0 90deg, transparent 0);
filter: drop-shadow(0 1px 0 rgba(0,0,0,.08));
}
/* un poco más grande en desktop */
@media (min-width: 980px){ .pp-corner{ width:26px; height:26px; } }
/* ---------- Badges más “chip” ---------- */
.pp-badge{
letter-spacing:.04em;
box-shadow: 0 10px 22px rgba(180,68,61,.24);
}
/* ---------- Cita con mejor jerarquía ---------- */
.pp-quote{
background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.45));
border-radius: 18px;
border: 1px dashed rgba(0,0,0,.14);
font-size: clamp(18px, 2.2vw, 22px);
}
.pp-quote:before, .pp-quote:after{
content:"✦"; display:inline-block; opacity:.7; margin:0 .4rem;
color: var(--ink2);
}
/* ---------- CTA & botones: hover/focus accesibles ---------- */
.pp-btn{
transition: transform .12s ease, box-shadow .12s ease, background .16s ease, color .16s ease, border-color .16s ease;
box-shadow: 0 8px 18px rgba(180,68,61,.18);
}
.pp-btn:hover{ transform: translateY(-1px); box-shadow:0 12px 26px rgba(180,68,61,.22); }
.pp-btn:focus-visible{ outline:2px solid var(--accent); outline-offset: 2px; }
.pp-btn--ghost{
border:2px solid var(--accent);
}
.pp-btn--ghost:hover{
background: var(--accent);
color:#fff;
}
/* ---------- Footer pequeños pulidos ---------- */
.pp-socials a{
transition: transform .12s ease, box-shadow .12s ease, background .16s ease;
}
.pp-socials a:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.75);
box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
/* ---------- Responsivo fino ---------- */
@media (max-width: 900px){
.pp-title{ font-size: clamp(34px, 7.5vw, 46px); }
.pp-lead { font-size: clamp(17px, 3.5vw, 20px); }
.pp-grid3{ gap:16px; }
.pp-card{ padding:18px; }
}
/* ---------- Animación de entrada sutil (prefiere movimiento reducido) ---------- */
@media (prefers-reduced-motion: no-preference){
.pp-card{ animation: floatUp .45s ease both; }
.pp-card:nth-child(2){ animation-delay:.05s }
.pp-card:nth-child(3){ animation-delay:.1s }
}
@keyframes floatUp{
from{ opacity:0; transform: translateY(8px); }
to { opacity:1; transform: translateY(0); }
}
/* Hotfix: más aire arriba en las tarjetas */
.pp-card{
padding-top: 36px; /* antes 24px */
overflow: visible; /* por si algún contenedor hereda overflow */
background-clip: padding-box; /* evita artefactos en el borde redondeado */
}
/* Baja un poco el iconito para que no “recorte” el borde */
.pp-ico{ top: 18px; } /* antes 12px */
/* El badge puede quedarse arriba, pero con este aire ya no se ve “cortado” */
.pp-badge{ top: -12px; } /* si lo ves aún pegado, prueba -10px */
/* En móviles, un pelín más de aire para que nada colisione */
@media (max-width: 600px){
.pp-card{ padding-top: 40px; }
.pp-ico{ top: 20px; }
}
/* Subtítulo SOLO dentro del Hero */
.pp-hero .pp-lead {
font-size: clamp(20px, 2.6vw, 26px) !important;
line-height: 1.35 !important;
}
/* Oculta cualquier “site-info” de Kadence, pero deja visible el tuyo */
footer .site-info:not(.pp-site-info) {
display: none !important;
}
/* Por si Kadence mete un enlace con su marca dentro de otro contenedor */
footer a[href*="kadencewp"],
footer a[href*="kadence-wp"] {
display: none !important;
}